两行对齐导航菜单答案

【问题标题】：Justifying Navigation Menu with 2 Rows两行对齐导航菜单
【发布时间】：2013-05-14 00:20:26
【问题描述】：

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

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

感谢任何建议。

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

我这里有一个 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/

【问题讨论】：

标签： css button nav justify text-justify

【解决方案1】：

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

【讨论】：

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