对齐水平菜单li项目

时间:2012-05-29 06:02:46

标签: html css css-float

我尝试对齐水平菜单时遇到了麻烦。到目前为止,我的菜单看起来很像 enter image description here

我有两个居中的元素来组成图像中的菜单,你可以看到一个在页面中居中的灰色边框(slide-nav类)。现在我正在尝试为菜单做同样的事情

我不得不对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;

}

3 个答案:

答案 0 :(得分:0)

我刚刚摆脱宽度,从margin: 0 auto移除了.slider并添加了text-align: center

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

希望这有帮助。

答案 1 :(得分:0)

我相信已经详细回答here

基本上,您希望使用display:inline-block呈现您的各个按钮,这样可以使它们合理化。然而,添加“虚拟”换行符以强制调整是一种技巧。

答案 2 :(得分:0)

这里你必须用

改变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;
}