Question

请考虑以下事项：(Live Demo)

HTML：

<table>
  <tbody>
    <tr>      
      <td class="col1">
        <button class="btn btn-small">Do Something</button> 
      </td>
      <td class="col2"></td>
    </tr>
    <tr>
      <td class="col1"></td>
      <td class="col2">
        <span style="position: relative">
          Text 
          <button class="btn btn-small" 
                  style="position: absolute; 
                         top: 0; 
                         left: 210px">
            Do Something
          </button>
        </span>
      </td>
    </tr>
  </tbody>
</table>

CSS：

tr {
  height: 100px;
}
td {
  border: 1px solid black;
}
.col1 {
  width: 150px;
}
.col2 {
  width: 200px;
}

为什么绝对定位的按钮正在包裹？

我可以通过以下方式解决：

button {
  white-space: nowrap;
}

但我真的很想知道为什么会发生这种情况，以及是否有更好的解决方法。

Answer 1

在这种情况下，它是为了避免溢出父容器而进行包装。它仍然溢出它，因为你有一个单词太长，但行为是试图不溢出它。如果您更改演示以在其他按钮中包含更多文本，则一旦超过表格单元格宽度，您就会看到它包装。

如果您想避免这种情况，请使用white-space: nowrap。

为什么绝对定位表格单元格中的元素？

1 个答案: