Question

我有一张应该包含图片的表格。在降低图像功能时，我希望控制按钮出现在表格单元格的顶部。

<table id="pridat_fotky">
    <tbody>
        <tr>
            <td class="empty">
                <button>X</button>
            </td>
        </tr>
    </tbody>
</table>

所以，我尝试给表格单元格position:relative和position:absolute按钮：

table#pridat_fotky td {
  position: relative;
}
/**THE BUTTON**/
table td button {
  position: absolute;
  top: 0px;   /*0 means as hight as possible within the cell???*/
  left: 50%;  /**MIDDLE ALIGMENT???*/
}

不幸的是，通过此设置，按钮将自己对齐到窗口的顶部。这是一个fiddle，Button是一个小红色方块。

Working solution here.

Answer 1

CSS中存在语法错误。在第17行中，您缺少＆＃34;：＆＃34;，（左50％;）

Answer 2

您需要在表格单元格的内容周围添加块级元素，如下所示：

<td class="empty">
    <div><button>X</button></div>
</td>

并将以下规则添加到CSS中：

table#pridat_fotky td div {
    /**TO MAKE THE BUTTON APPEAR RELATIVE?**/
    position: relative;
    height: 100%;
}

position: relative在表格单元格上无效，但在表格单元格中的块级别元素上有效。

您还需要设置height: 100%以使div填满表格单元格，然后展示位置效果很好。

请参阅演示：http://jsfiddle.net/audetwebdesign/k9fWN/

注意：您需要将包装器div添加到要放置按钮的所有表格单元格中。

将按钮相对于其父节点的顶部放置

Working solution here.

2 个答案: