Question

我想用图片上的铅笔将“状态”居中：

这是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。请告诉我这个问题是否不清楚。

Answer 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等是“块”元素，不能与文本样式对齐。

把铅笔贴在右边

1 个答案: