在导航栏间距中排序列表

时间:2013-06-25 05:03:26

标签: html css navigation

我目前正在尝试为我的网站制作导航栏。我正在使用列表这样做,并且无法正确订购。

我试图将我的网站名称挂在左边,中间有3个列表,然后是一个挂在右边的。

我能够正确地让我的三个人在中心,但是无法获得外面的两个名单。

有没有办法以不同方式分隔列表,例如添加空格?

这是我到目前为止所拥有的一个例子。 http://jsfiddle.net/DnvLt/2/

继承我的代码:

#navbar ul { 
margin: 0; 
padding: 5px; 
list-style-type: none; 
text-align: center; 
background-color: #000;
} 

#navbar ul li {  
display: inline; 
} 

#navbar ul li a { 
text-decoration: none; 
padding: .2em 1em; 
color: #fff; 
background-color: #000; 
} 

#navbar ul li a:hover { 
color: #000; 
background-color: #fff; 
} 

1 个答案:

答案 0 :(得分:1)

你可以这样做

<ul style="overflow:hidden; list-style-type: none;">
    <li style="float:left;">Left</li>
    <li style="float:right;">Right</li>
    <li style="overflow:hidden; display:block; width:300px; margin:0 auto;">
        <ul style="list-style-type: none;">
            <li style="float:left;">element 1</li>
            <li style="float:left;">element 2</li>
            <li style="float:left;">element 3</li>
        </ul>
    </li>
</ul>

首先将所有元素包装在一个块(div)中,然后通过浮动放置右侧和左侧元素,最后将中心元素静态放置在浮动元素顶部的中心。

要将元素放在中心,您必须将其设为块,静态宽度为margin:0 auto;

溢出就在那里,浮动的元素不会溢出:)