使用浮动左右元素的无序列表导航 [英] Unordered list navigation with floating left and right elements

问题描述

我有一个简单的导航栏在页面的顶部有几个链接 - 第一个浮动到左边使用li：第一个孩子，最后浮动到右边使用li：最后一个孩子，其余的中心在中间的页面。

I have a simple navigation bar at the top of the page with several links – the first is floated to the left using li:first child, the last floated to the right using li:last child, with the remainder centered in the middle of the page.

为了所有的目的和目的，这是有效的 - 但是尽管每个导航块之间的空格是相同的，进一步向右。我假设这是因为链接长度不同 - 即链接1的23个字符，链接2的7个字符。

To all intents and purposes this works – but although the space between each of the navigation blocks is the same, the central block is actually positioned much further to the right. I presume this is because the links differ in length – ie 23 characters for link 1, 7 characters for link 2.

有任何解决方法，使用另一种方法将中间块定位在页面的绝对中心？

Is there any way of resolving this, or should I be using another approach to position the middle block in the absolute centre of the page?

下面是我目前使用的代码，可以在这里找到一个jsfiddle： http://jsfiddle.net/pxuVJ/

Below is the code that I am currently working with, and a jsfiddle can be found here: http://jsfiddle.net/pxuVJ/

编辑19:28 13.05.12
由于这是一个有点混乱的解释，我采取了一个screengrab说明问题： http：//位。 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>&#8226;</li>
    <li><a href="#link2">link 2</a></li>
    <li>&#8226;</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; }​

推荐答案

Shreedhar是完全正确的， '不是必需的 - 虽然不是猜测分配 li：first-child 和 li：last child 绝对位置的边距，似乎是一个更好的方法 - 在中央区块中有任何数量的连结。

Shreedhar is quite right in that using 'float' is not required – although rather than guessing the margins assigning li:first-child and li:last child absolute positions seems to be a better method – it also seems to work with any number of links in the central block.

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

这篇关于使用浮动左右元素的无序列表导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！