Question

我感觉这样应该很简单。但我没有太多运气。

我正在创建一个包含表格的网站。该表包含标题，其中包含用于描述列和图像的文本。有关详细信息，用户可以将鼠标悬停在图像上。

但我所看到的是文本和图像彼此不对齐。而是图像换行到新行。即对于细柱。

我想防止这种情况发生。到目前为止，我唯一的成功就是在表头中使用另一个表。这看起来很荒谬。

我怎样才能做到这一点？

我的HTML有一些尝试。

<table class="inline">
    <tr>
      <th>TextA <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th>
      <th><table><tr><td>TextB</td> <td><img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></td></tr></table></th>
      <th><span style="display: inline-block;">TextC <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></span></th>
      <th>TextD <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th>
      <th>TextE <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th>
    </tr>
  </table>

我的样式表

.info {
    width: 16px;
    height: 16px;
    float: right;
}

.inline {
    white-space: nowrap;
    /*overflow: hidden;*/
    /*display: inline-block;
    table-layout:fixed;*/
}

Answer 1

默认情况下，图像和文本都是内联元素。如果他们没有足够的空间，他们将换行到下一行。通过设置：

修复此问题

th {
    white-space: nowrap;
}

这会强制所有内联元素（display: inline和display: inline-block）保持在同一行，并推动th的边界以使其变宽。

此外，您永远不应该使用表来实现某种布局。表格包含表格数据。 CSS是为了处理样式而发明的。

将文本和图像分组在一起

1 个答案: