4

絶対に相対コンテナ内に div を配置していますが、Firefox では完全に無視されます。

ここにこれのためのfiddeがあります：http://jsfiddle.net/TThUZ/

私のHTML：

<div class="main">
    <ul>
        <li>
            <a>
                Text
            </a>
            <div class="sub">
                Sub
            </div>
        </li>
    </ul>
</div>

CSS:

ul { display: table; }
li { display: table-cell; width: 300px; background: #ddd; padding-left: 50px; position: relative; }
.sub { position: absolute;  left: 0; }

はの.sub位置: の相対に従っていませんli。なんで？そしてそれを修正する方法は？

4

3 に答える 3

7

.subやるべきことをやっている。私はそれがあなたと関係があると信じていますdisplay: table-cell;。検証のためにこのリンクをチェックしてください: http://css-tricks.com/absolutely-position-element-within-a-table-cell/

[...]表のセル要素は、これらの位置の値を取りません。したがって、それらの要素のコンテキスト内で要素を絶対に配置することもできません.[...]

上記の記事では、配置を使用するために次の修正、追加、および table-cell 内の要素を提案しています。あまりセマンティックではありませんが、機能します。

http://jsfiddle.net/TThUZ/6/

divあなたの代わりに相対位置を使用している追加に注意しliてくださいdisplay: table-cell;。

HTML

<div class="main">
    <ul>
        <li>
            <div class="table-cell-fix">
                <a>
                    Text
                </a>
                <div class="sub">
                    Sub
                </div>
            </div>
        </li>
    </ul>
</div>

ここで、CSS を少しだけ追加します。position: relative;からli新しい に移動しdivます。また、あなたが持っていたパディングをli新しいに移動しましたdiv。

CSS

ul {
    display: table;
}
li {
    display: table-cell; 
    width: 300px; 
    background: #ddd; 
}
.sub { 
    position: absolute;
    left: 0; 
    top: 0;
}
.table-cell-fix {
    position: relative;
    padding-left: 50px;
}
于 2013-08-28T03:27:13.370 に答える
0

LIの表示を のblock代わりに に設定してみてくださいtable-cell

li { 
    display: block; 
}

あなたのFIDDLEを更新しました。

于 2013-08-28T03:29:27.490 に答える