0

我目前正在尝试为我的网站制作导航栏。我正在使用列表来执行此操作，但无法正确排序。

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

1 回答 1

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;

溢出在那里，所以浮动的元素不会溢出:)

于 2013-06-25T05:16:06.483 回答