把铅笔贴在右边答案

【问题标题】：Stick the pencil on the right把铅笔贴在右边
【发布时间】：2017-04-25 20:46:59
【问题描述】：

我想用铅笔在图片上居中显示“状态”：

这里是html代码：

{{ headers }}

{% load i18n admin_static material_admin %}

{% if results %}
<div class="results">
  <table id="result_list" class="table bordered highlight">
    <thead>
      <tr>
        {% for header in result_headers %}
        {% if 'action_checkbox' in cl.list_display and forloop.counter == 1 %}
        <th class="action-checkbox">
            {{ header.text }}<label for="action-toggle">&nbsp;</label>
        </th>
        {% else %}
        <th scope="col" {{ header.class_attrib }}>
            {% if header.sortable %}
                {% if header.sort_priority == 0 %}
                    <a href="{{ header.url_primary }}" data-turbolinks="false">{{ header.text|capfirst }}</a>
                {% elif header.ascending %}
                    <a href="{{ header.url_primary }}" title="{% trans "Toggle sorting" %}" data-turbolinks="false"><i class="material-icons">arrow_upward</i>{{ header.text|capfirst }}</a>
                {% else %}
                    <a href="{{ header.url_remove }}" title="{% trans "Remove from sorting" %}" data-turbolinks="false"><i class="material-icons">arrow_downward</i>{{ header.text|capfirst }}</a>
                {% endif %}
            {% else %}
                <span>{{ header.text|capfirst }}</span>
            {% endif %}
        </th>{% endif %}{% endfor %}
        <th style="text-align:right;" style='postion: relative; right: 500px'>{% trans "Status" %}</th>
        {% if row_actions_template %}
        <th style="text-align:right;">{% trans "Actions" %}</th> 
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% for row in results %}
      <tr class="{% cycle 'row1' 'row2' %}">
        {% for item in row.cols %}
          {{ item }}
        {% endfor %}
        <td class="material-icons">create</td>
        {% if row_actions_template %}
        <td class="row-actions">{% include row_actions_template with object=row.object %}</td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% include "loanwolf/pagination.inc.html" %}

这里的两条重要的行是<th style="text-align:right;">{% trans "Actions" %}</th> 和<td class="material-icons">create</td>。我怎样才能修改铅笔，让它在右边一点点？

我以为我可以做到<td class="material-icons" style='position: relative; right: 200px'>create</td>，但没有成功。

提前致谢！

P.S.如果问题不清楚，请告诉我。

【问题讨论】：

你能通过从 DOM 检查器复制你的 html 来在这里发布一个 sn-p。
@Nimish 抱歉，我从近一周开始就开始使用 html 了。你能告诉我你的问题是什么意思吗？
检查窗口。复制整个 html 并粘贴到 sn-p 中。还添加必要的 css 代码。如果使用，请不要忘记添加外部库。
请阅读How to Ask，尤其是关于写标题的部分。这不是一个好标题。此外，这不是普通的 HTML。您显然正在使用某种模板框架。包括它的标签，或显示呈现的 HTML。

标签： html css django

【解决方案1】：

不要将您的图标放在子表中。表格并非用于布局，它们仅用于显示表格数据仅。

相反，将以下内容应用于包含您的操作按钮的表格单元格：

.actions {
    text-align: right;
}

然后让你的图标成为一个锚标签列表。我不得不对您的图标的结构及其类做出假设，因为您没有包含图标 html：

<td class="actions">
    <a href="#" class="icon icon-pencil">Action1</a>
    <a href="#" class="icon icon-clipboard">Action2</a>
    <a href="#" class="icon icon-plus">Action3</a>
</td>

锚标签是“内联”元素，将响应text-align 样式。表格、div 等是“块”元素，不能与文本样式对齐。

【讨论】：