表格单元格对齐

Question

这个小问题开始引起我的注意，我已经读了很多，过去也从未遇到过这个问题，但是我似乎无法让第二个div出现在表格单元格的右侧，没有任何帮助将不胜感激。

我的标记是

<td>
    <div class="sort">
        <a href="#">ID</a>
        <span class="icon1"></span>
    </div>
    <div class="divider icon2"></div>
</td>

而我的CSS是

thead .sort a {
    color: #fff;
    float: left;
}

thead .sort {
    float: left;
}  

thead .divider {
    float: right;
}  

我期望这是简单的事情或我只是忽略的事情。

谢谢，

Answer 1

table .sort a {color: #f00; float: left;}
table .sort {float: left; border:1px solid #093;}  
table .divider {float: right; border:1px solid #00F;}

和

<table width="100%" border="0">
      <tr>
        <td>
          <div class="sort">
            <a href="#">ID</a>
            <span class="icon1"></span>
          </div>
          <div class="divider icon2">icon</div>
        </td>
      </tr>
    </table>

作品。

注意，我刚刚在CSS中添加了两个边框。

但是后来我只是尝试了您的代码，在这里也可以使用。

在CSS中使用THEAD或TABLE似乎没有什么区别。 您是否可能还有其他样式与表中使用的样式冲突？

无论如何，使用上述CSS（引用table .SORT而不是THEAD .sort ），在HTML中的一行周围添加THEAD标签不会对其产生影响。

希望能有所帮助。

Answer 2

您在CSS中使用<thead> ，但是在Html ，您正在使用<td> 。 尝试在Html使用<thead>