html - 导航栏间距中的排序列表

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>

首先，您将所有元素包裹在一个 block (div)中，然后通过 float 放置左右元素，最后将中心元素静态放置在 float 元素顶部的中心。

要将元素放在中心，您必须将其设为一个 block ，具有静态宽度和 margin:0 auto;

溢出是为了让 float 的元素不会溢出:)