0

私は、li 要素が 2 つの列に左にフロートされた順序付けられていないリストで構成されるサブメニューを作成しています。

http://jsfiddle.net/orvn/mrCxu/

特定のリスト項目に他の項目よりも多くのテキストがある場合、それは折り返され、意図したよりも多くのスペースを占有します (これは問題ありません)。

他の2つのリスト項目のスペースを埋めるために長いリスト項目を取得できないように見えるので、ギャップはありません(リンクされたjsfiddleを参照)。

提案？（メニューの順番は特にこだわりません）

HTML

<div id="wrapper">
    <ul>
        <li><a href="">List item one</a></li>
        <li><a href="">List item two</a></li>    
        <li><a href="">List item three is longer</a></li> 
        <li><a href="">List item four</a></li>
        <li><a href="">List item five</a></li>
        <li><a href="">List item six</a></li>
        <li><a href="">List item seven</a></li>
        <li><a href="">List item eight</a></li>
        <li><a href="">List item nine</a></li>
        <li><a href="">List item ten</a></li>
        <li><a href="">List item eleven</a></li>
    </ul>
</div>

CSS

#wrapper {width:140px; margin:10px 0 0 10px; padding:0} 
#wrapper ul {list-style-type: none; margin:0; padding:0}
#wrapper ul li {float:left;}
#wrapper ul li a {display:block; height:100%; width:64px; border:1px solid}
4

0 に答える 0