帶左右浮動元素的無序列表導航

我在頁面頂部有一個簡單的導航欄，帶有幾個鏈接 - 第一個使用li浮動到左邊：第一個孩子，最後一個浮動到右邊使用li：最後一個孩子，剩下的人集中在頁面中間。帶左右浮動元素的無序列表導航

儘管所有的意圖和目的都適用 - 但儘管每個導航塊之間的空間是相同的，但中央塊實際上位於更靠右的位置。我推測這是因爲鏈接的長度不同 - 即鏈接1爲23個字符，鏈接2爲7個字符。

有沒有解決此問題的方法，或者我應該使用另一種方法來定位中間塊頁面的絕對中心？

下面是我目前使用的代碼，和的jsfiddle可以在這裏找到：http://jsfiddle.net/pxuVJ/

EDIT 19:28 12年5月13日 由於這是一個有點混亂來解釋，我有采取了一個screengrab這說明了問題：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; }

來源

2012-05-13 mrcollioni

不明白你的意思，我看到的是，現場的左邊，LINK 1 TITLE - LINK2 - LINK3在中間，並聯繫到正確的。即使如果我改變鏈接1爲一個更大的文本（27個字符）仍然3中間鏈接在中間... –

對不起 - 有點混淆解釋。它們的三個組相對於其他鏈接位於頁面的中間，但不在頁面的中間。也許這個screengrab會幫助：http://bit.ly/Khd8cN – mrcollioni

Shreedhar是非常正確的使用'浮動'不是必需的 - 雖然而不是猜測邊際分配li：第一個孩子和李：最後一個孩子絕對位置似乎是一個更好的方法 - 它似乎也工作與中央區塊中的任何數量的鏈接。

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-14 06:59:56 mrcollioni

，而不是使用

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-13 17:45:39 Shreedhar

謝謝，但這並沒有真正實現我所追求的結果 - 三個鏈接應該集中在頁面上，最左邊的'標題'和'聯繫'在最右邊。我已經採取了一個屏幕抓圖，這可能有助於進一步：http://bit.ly/Khd8cN – mrcollioni

試試這個： navi li：first-child {margin-right：50px; } nav li：last-child {margin-left：50px; } 不給浮點：左和右：第一個和最後一個li。 – Shreedhar

啊 - 你已經指出我正確的方向，謝謝。當你說「不給浮動：左和浮動：對於第一個和最後一個李的權利，是因爲它是不好的練習，還是因爲它不適用於你的建議答案？ – mrcollioni

帶左右浮動元素的無序列表導航

回答

相關問題