CSS文本對齊問題

在Chrome和Safari，發生以下問題的CSS：CSS文本對齊問題

ul，li和a或鏈接有推動一切垂直走了默認的CSS屬性。我已撥弄以下屬性：

font-size 
margin-right 
padding 
color 
text-decoration 
margin 
padding 
border 
display 
list-style 
vertical-align 
line-height 
line-height 
font-style 
margin 
font-variant 
padding-top 
padding-bottom 
margin-top 
margin-bottom

而沒有什麼似乎可以防止這個問題。我已經下載了雅虎重置的CSS，但我不確定如何正確使用它。我還沒有追求，因爲我不知道它會解決我的問題。

來源

2013-04-08 Maurice Tempelsman

請在您的代碼中加入一個[jsFiddle]（http://jsfiddle.net） – Adrift 2013-04-08 18:06:37

此外，您對所列屬性嘗試了哪些值？我發現只需在「body *」上設置margin：0和padding：0即可處理任何間距問題（垂直或水平）。 – Jeff 2013-04-08 18:35:58

http://jsfiddle.net/SBnKw/ – 2013-04-08 19:52:19

我看了你的Fiddle，我有點困惑。你說事情正在被垂直推開，但我根本沒有看到這一切發生。

我所看到的唯一能夠滿足該描述的事情就是您的鏈接位於不同的行中。

如果這是問題，解決方案很簡單：div s是塊級元素。這意味着它們的默認寬度爲100％，並且設計爲在開始之前打破新的生產線，並在之後生產新的生產線。這是display: block;的行爲，並且內置於div的默認樣式。

爲了解決這個問題，應用以下樣式：

#headernav div{ display: inline; }

然而，這是最你的問題。您複製到小提琴中的代碼缺少某個div元素的結束標記，這可能會導致舊版瀏覽器出現不可預知的行爲。你有兩個ID相同的div，這是一個主要的禁忌。

在this update to your fiddle我修復了您遇到的HTML問題。請注意，'tempLink'現在是一個類，目標是'。'在CSS中，不是表示ID的'＃'。

我已將上述CSS應用於類tempLink，而不是您的headernav中的任何div。

請注意，在你的兩個鏈接現在是並排的小提琴。您可以使用邊距和填充來控制它們之間的水平間距（以tempLink類爲目標）。

來源

2013-04-08 21:12:38 Jeff

我也很困惑，有時候最好只是繼續前進。感謝您的輸入。 – 2013-04-19 16:17:58

正如Adrift提到，如果您使用jsFiddle，診斷將會容易得多。這就是說，你有沒有嘗試過顯示：inline-block或float：left？

來源

2013-04-08 18:28:06

http://jsfiddle.net/SBnKw/ – 2013-04-08 19:54:10

我已經發布了期待已久的小提琴，需要一些幫助，因爲這些屬性都沒有奏效。 – 2013-04-08 20:19:39

CSS文本對齊問題

回答

相關問題