3

現在のメニューのデモをまとめました。HTML 構造を変更することはできません。

HTML

<ul class="menu row1">
    <li>item</li>
    <li>varied item</li>
    <li>item</li>
    <li>item</li>
</ul>
<ul class="menu row2">
    <li>longer item</li>
    <li>item</li>
    <li>longer item</li>
</ul>

CSS

.menu li {
    display: inline-block; border-right: 1px solid; 
    padding: 0 10px; margin: 0; line-height: 32px;
}
.menu {border: 1px solid; margin: 10px 10px 0;}
.menu.row2 {margin-top: 0; border-top: 0;}
.menu li, .menu {border-color: #888;}

JS

var $row0 = $('.menu.row1 > li');
var $row1 = $('.menu.row2 > li');

for (x=0; x < $row0.length; x++) {
    if (typeof $row1[x] != 'undefined') {
        var w1 = $($row0[x]).width();
        var w2 = $($row1[x]).width();
        var w3 = Math.max(w1, w2);

        $($row0[x]).add($row1[x]).width(w3);
    }
}

CSSのみで現在のJSと同じ効果を得ることは可能ですか？ありがとう。

アップデート：

これに答えてくれたBig00dに感謝します。デモを更新しました。

新しい CSS

.menu li {
    display: table-cell; border: 1px solid #888; 
    padding: 0 10px; margin: 0; line-height: 32px;
    border-left: 0;
}
.menu {margin: 10px 10px 0; display: table-row;}
.menu.row2 {margin-top: 0;}
.menu.row2 li {border-top: 0;}

IE8 以上でサポートされています。

4

2 に答える 2

3

display: table/table-row/table-cellおそらく次のように使用したいと思うでしょうvertical-align:bottom;: http://www.quirksmode.org/css/display.html#table

于 2013-02-18T12:22:29.293 に答える
3

何度も追加display:table-row;する.menuとdisplay:table-cell、.menu > liこれでうまくいくはずです

于 2013-02-18T12:27:22.290 に答える