![](/img/trans.png)
[英]Floating part of Unordered List Left and part of it Right on the Same Line
[英]Unordered list navigation with floating left and right elements
我在页面顶部有一个简单的导航栏,其中包含几个链接–第一个使用li:first child浮动到左侧,最后一个使用li:last child浮动到右侧,其余居中页。
出于所有目的和目的,这是可行的–但是,尽管每个导航块之间的空间是相同的,但中央块实际上位于更右侧的位置。 我认为这是因为链接的长度不同-例如,链接1的23个字符,链接2的7个字符。
有什么方法可以解决这个问题,还是应该使用另一种方法将中间块放置在页面的绝对中心?
以下是我当前正在使用的代码,可以在这里找到jsfiddle: http : //jsfiddle.net/pxuVJ/
编辑19:28 13.05.12因为有点令人困惑的解释,所以我截取了一个说明问题的屏幕截图: http : //bit.ly/Khd8cN
非常感谢。
HTML:
<nav>
<div id="navigation">
<ul>
<li><a href="#home">title of site</a></li>
<li><a href="#link 1">link 1</a></li>
<li>•</li>
<li><a href="#link2">link 2</a></li>
<li>•</li>
<li><a href="#link 3">link3</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</nav>
CSS:
nav {
font: 10pt Courier;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 20px;
padding: 20px;
background-color: #ffffff;
text-transform: uppercase;
z-index: 10;
text-align: center;
}
nav li { display: inline; list-style: none; }
nav li:first-child { float: left; }
nav li:last-child { float: right; }
而不是使用
dispaly:inline;
您可以使用
nav li { float:left; list-style: none; padding : 10px; }
nav li:first-child { margin-right:50px; } nav li:last-child { margin-left:50px; }
Shreedhar的观点是正确的,因为不需要使用'float'-尽管不是猜测li:first-child和li: lastchild绝对位置的边距似乎是一个更好的方法-它似乎也可以用于任何数量的链接在中央街区。
nav li {
display: inline;
list-style: none;
text-align: center;
}
nav li:first-child {
position: absolute;
left: 20px;
text-align:left;
}
nav li:last-child {
position: absolute;
right: 20px;
text-align: right;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.