html - 对齐水平菜单 li 项

Question

我在尝试对齐水平菜单时遇到了真正的麻烦。到目前为止，我的菜单看起来像

我有 2 个居中的元素来组成图像中的菜单，您可以看到页面中居中的灰色边框（幻灯片导航类）。现在我正在尝试对菜单做同样的事情

我不得不对 li 宽度进行硬编码，但理想情况下我希望它们能够自动适应。没有javascript可以在中心对齐菜单项吗？

我的html

   <nav class="slide-nav">
            <ul class="slider">
                <li class="selected">
                    <div>
                        <span class="heart"></span>
                        <div>
                            Get Started</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="price-tag"></span>
                        <div>
                            Get Results</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="star"></span>
                        <div>
                            Track & Engage</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="people"></span>
                        <div>
                            Features</div>
                    </div>
                </li>
            </ul>
        </nav>

css

.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px; 
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;

display: inline-block;
width: 150px;
}
.slider li div 
{
line-height: 31px; 
}
.slider li div div 
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;

}

Answer 1

这是你必须改变的CSS

.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px; 
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}

Answer 2

我刚刚摆脱了宽度，margin: 0 auto从.sliderole 中删除并添加了text-align: center。

查看现场演示：http: //jsfiddle.net/RJL7J/

希望这可以帮助。

Answer 3

我相信这已经在这里详细回答了。

基本上，您希望呈现您的各个按钮，display:inline-block这将允许它们被证明是合理的。然而，有一个技巧是添加一个“虚拟”换行符来强制调整。