0

下の図のような水平メニューに変換する必要がある n 個の項目を持つ順序付けられていないリストがあります。奇妙な項目をすべて選択してリストの最後に移動し、2 つのメニュー行を作成することはできましたが、センタリングはかなり難しいと思います。

使用したコードですが、中央に配置できません:

jQuery('#ja-mainnav ul li').css({'float':'left', 'display': 'block', 'margin-left': 'auto', 'margin-right': 'auto' });
jQuery('#ja-mainnav ul li:odd:first').css({'clear':'both', 'margin-left':'40px'});
jQuery('#ja-mainnav ul li:odd').insertAfter('#ja-mainnav ul li:last');
4

1 に答える 1

1 
<style type="text/css">
li {
    background:red;
    border:1px solid black;
}
div#ja-mainnav {
    width:150px;
    overflow:hidden;
    text-align:center;
}
</style>
<div id="ja-mainnav">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

とJS

jQuery('#ja-mainnav ul li').css({
    'display': 'inline-block'
});
jQuery('#ja-mainnav ul li:odd').insertAfter('#ja-mainnav ul li:last');
}

デモ: http://jsfiddle.net/Tkgjf/

于 2012-08-07T22:22:04.807 に答える