0

我在页面顶部有一个带有几个链接的简单导航栏——第一个使用 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>&#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; }​
4

2 回答 2

0

而不是使用

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; }
于 2012-05-13T17:45:39.810 回答
0

Shreedhar 是非常正确的，因为不需要使用“float”——尽管与其猜测分配li:first-child和li:last child绝对位置的边距似乎是一种更好的方法——它似乎也适用于任意数量的链接在中央街区。

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;
}
于 2012-05-14T06:59:56.337 回答