Question

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

我试图将我的网站名称挂在左边，中间有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; 
}

Answer 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;

溢出就在那里，浮动的元素不会溢出：）

在导航栏间距中排序列表

1 个答案: