Css 使用两行调整导航菜单

我试图在css中重新创建这个导航菜单，但我很难让位行彼此正确对齐

我不确定将其格式化为li元素是最好的，还是应该尝试使用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/

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

对于#访问ul li添加浮动：左；对于#一里和#二里，将右边的边距替换为左边的边距，现在尝试合并。如果你想让所有li都具有相同的宽度，为#access ul li设置宽度

我尝试了你的建议，但仍然不合理。我正在尝试匹配一张图片-图片看起来每个元素都有不同的宽度。我真的对此进行了研究-但找不到解决方案。最后，我在photoshop中测量了每个按钮，并让每个按钮都有一个单独的id，它有自己的宽度和高度。这是一种痛苦，但至少现在看来是合理的。