0

我正在制作一个子菜单，其中包含一个无序列表，其 li 元素向左浮动到两列中。

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

当特定列表项的文本比其他项多时，它会换行并占用比预期更多的空间（我同意）。

我似乎无法获得更长的列表项来填充其他两个列表项的空间，因此没有间隙（请参阅链接的 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