0

ページの上部にシンプルなナビゲーション バーがあり、いくつかのリンクがあります。最初のナビゲーション バーは li:first child を使用して左にフロートし、最後は li:last child を使用して右にフロートし、残りはリンクの中央に配置します。ページ。

すべての意図と目的に対して、これは機能しますが、各ナビゲーション ブロック間のスペースは同じですが、中央のブロックは実際にはかなり右側に配置されています。これは、リンクの長さが異なるためだと思います。つまり、リンク 1 は 23 文字、リンク 2 は 7 文字です。

これを解決する方法はありますか、それとも別のアプローチを使用して中間ブロックをページの絶対中心に配置する必要がありますか?

以下は私が現在取り組んでいるコードで、jsfiddle はここにあります: http://jsfiddle.net/pxuVJ/

EDIT 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 に答える