Question

我有以下内容：

HTML

<th class="sort">
<div>
    <div class="sort"></div><a href="#">Last Name</a>

</div>
</th>

的CSS：

table.tablesorter thead th.sort
{
    padding:0;
}

table.tablesorter thead th div.sort 
{
    margin:0;
    width:15px;
    height:30px;
    float:left;
    background: url("/Content/images/admin/sort.png") no-repeat;
    background-position: 0px center;
    cursor:pointer;
}

table.tablesorter thead tr th.sort a 
{
    cursor:pointer;
 color:inherit;
    vertical-align:middle;
    float: left; 
    padding-top: 7px;
}

我希望显示内部和内部垂直对齐的中间，并且总是在一行上，这样当浏览器窗口调整大小（小）时，它不会破坏，也不会更多地在内部（现在正在发生的事情）。感谢

Answer 1

使用“display inline”命令...

<div style="display:inline;float left;"><a href="#">First name</a></div>
<div style="display:inline;float right;"><a href="#">Last name</a></div>

Answer 2

我不清楚你指的是什么“内在”和“内部”（你很想更新和详细说明，以及发布表格的完整标记）但听起来你基本上都想要一切无论可用空间如何，它都在一条连续的线上。您可以使用whitespace: nowrap;关闭文本。但是，您的内容将溢出th，因为这是表格单元格的工作原理，因此您需要在包装文本的内容上设置overflow: hidden。除非你在细胞内需要不止一个元素，否则你不需要漂浮物。

标记可能如下所示：

<thead>
  <th><div class="clip sort"><a href="#">First Name</a></th>
  <th><div class="clip sort"><a href="#">Last Name</a></th>
</thead>

这样的CSS就是这样：

.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}

始终在一行上对齐DIV的内容

2 个答案: