css - 用 2 行对齐导航菜单

Question

我正在尝试在 css 中重新创建此导航菜单 - 但我很难让位行正确地相互对齐。

我不确定将它格式化为 li 元素是最好的 - 或者我应该尝试 JS 按钮。

如有任何建议，我们将不胜感激。

我试着放一张图片 - 但它看起来不像有足够的声誉点 - 但想象一下所有按钮都对齐。

我这里有个 JS fiddle

<nav id="access" class="group" role="navigation">
<ul id="two">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">EDUCATION</a></li>
<li><a href="">HISTORY</a></li>
<li><a href="">ALUMNI</a></li>
</ul>


<ul id="one">
<li><a href="">THE PHILLAPINES</a></li>
<li><a href="">INFORMATION</a></li>
<li><a href="">GERMANY</a></li>
<li><a href="">LONDON</a></li>
<li><a href=" ">Contact Us</a></li>
</ul>
</nav>


http://jsfiddle.net/mjkessel/jK26n/2/

Answer 1

对于#access ul li add float: left;对于 #one li 和 #two-li 将 margin-right 替换为 margin-left 并尝试合并。如果你想让所有的 li 具有相同的宽度设置宽度 #access ul li