Question

HTML：

<br/><br/><br/><br/><br/>

<table>
<tr>
    <td class="container">
        <button class="del">delete</button>
    </td>
</tr>
</table>

<br/><br/><br/><br/><br/>

<div class="container">
<button class="del">delete</button>
</div>

的CSS：

.container {
    position: relative;
    border: 1px solid red;
    height: 50px;
    width: 200px;
}

.del {
    position: absolute;
    top: 3px;
    right: 3px;
}

为什么div内的按钮会放在div的右上角，但td内的按钮会放在桌子外面？

如何解决？

请参阅活动演示：http://jsfiddle.net/Freewind/d6Tug/

Answer 1

我认为它与td的显示风格有关，即table-cell。如果您将其设置为display:block，它将正常工作。

只需将display:block添加到.container样式。

正如freewind所指出的，如果你的浏览器支持td，最好使用inline-block，因为td通常会显示在一行中。

Answer 2

赋予元素position:absolute;相对于其包含块的位置。由于表格单元格不被视为块容器（与div不同），因此它将其相对于文档正文本身放置。 top:3px;从文档的上边框带来3px，right:3px;从右边框移动3px。

http://reference.sitepoint.com/css/position

带有`position：absolute`的内部按钮将放在一个表格之外

2 个答案: