1

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;
}​

diva 内のボタンは div の右上隅に配置されるのに、a 内のボタンtdはテーブルの外に配置されるのはなぜですか?

修正方法は？

アクティブなデモを見る: http://jsfiddle.net/Freewind/d6Tug/

4

2 に答える 2

1

tdの表示スタイル、つまりと関係があると思いますtable-cell。に設定するとdisplay:block正常に動作します。

display:block.container スタイルに追加するだけです。

freewind が指摘したようにinline-block、td は通常行に表示されるため、ブラウザで td がサポートされている場合は使用することをお勧めします。

于 2012-04-08T02:07:03.470 に答える
1

要素を指定position:absolute;すると、それを含むブロックに対して相対的に配置されます。テーブル セルは ( とは異なりdiv) ブロック コンテナーとは見なされないため、ドキュメント本体自体に対して相対的に配置されます。top:3px;ドキュメントのright:3px;上端から 3px 移動し、右端から 3px 移動します。

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

于 2012-04-08T02:34:18.727 に答える