css - 两行对齐导航菜单

Question

我正在尝试在 css 中重新创建这个导航菜单 - 但我很难让位行正确地相互证明。

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

任何建议表示赞赏。

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

我在这里有一个 JS 小提琴

<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 添加 float: left; 对于 #one li 和 #two-li 将 margin-right 替换为 margin-left ，现在尝试合并。如果您想让所有 li 具有相同的宽度，请为 #access ul li 设置宽度