居中問題

我想中心很長的一行文本。而不是所有人在同一條線上，它分開兩行。居中問題

下面是HTML：

<div id="head"> 
    <h1>Hello</h1> 
    <p><a href="#">Last.fm</a>/<a href="#">Twitter</a>/<a href="#">Dribbble</a>/<a href="#">GitHub</a></p> 
</div>

而CSS：

#head{ 
border-bottom: 1px solid #ccc; 
margin: 0 auto; 
width: 760px; 
text-align: center; 
} 

#head p{ 
line-height: 1em; 
margin: 0; 
}

我得到這樣的結果：

alt text http://i25.tinypic.com/awb8l4.png

我覺得骯髒的啞。對此可能有一個簡單的答案，但是我無法把頭圍住。幫幫我？

來源

2010-07-13 Ethan Turkeltaub

你能提供一個鏈接嗎？我在這裏嘗試時沒有看到這種效果： http://jsfiddle.net/Rz48M/ 此外，您使用的是哪種瀏覽器？ – Patrick 2010-07-13 01:43:56

我正在使用Chrome。我把它放在這裏：http://ethan.luffle.com/labs/ethan/ – 2010-07-13 01:47:59

您不關閉您的<p>標籤

你確定有沒有影響相關元素其他CSS？（例如登入FireBug）。

嘗試將!important放置在您的#head寬度之後，看看是否可以糾正這些問題。如果是這樣，那麼你有一個級聯問題，你需要解決。

來源

2010-07-13 01:42:35

糟糕。我剛把它複製過來，忘了結束標籤。 – 2010-07-13 01:44:12

'！important'不起作用。我檢查了Firebug，除了字體樣式以外沒有任何影響。鏈接到整個頁面：http：//ethan.luffle.com/labs/ethan – 2010-07-13 01:54:28

當p標籤尺寸不足以包含一行上的所有文本時，它會自動在空白處換行。看起來你應該有足夠的width根據你的風格，但沒有看到頁面，這很難知道。

您可以將white-space: no-wrap;添加到您的#head p款式或在您的鏈接之間插入 。

發佈一個鏈接，如果你可以，因爲它似乎你應該工作。

來源

2010-07-13 01:44:32

'空白：不換行;'不起作用。他們之間也沒有' '。鏈接到整個頁面：http：//ethan.luffle.com/labs/ethan – 2010-07-13 01:52:20

您正在將每組鏈接放在一個'p'標籤中。這是造成包裝。如果你想要一行上的所有鏈接，你只需要一個'p'標記。構建這種導航的更合適的方式是「ul」 – 2010-07-13 02:21:40

發現問題。我插入了額外的</p>。衛生署！

感謝您的時間，每個人。

來源

2010-07-13 01:58:15

回答

相關問題