浮動列表有一個縮進，我不明白爲什麼

在某些時候，我的浮動鏈接列表以縮進結束，導致最後一個鏈接進入一個新行（或者如果我設置了div的一側寬度爲ul）。浮動列表有一個縮進，我不明白爲什麼

我從字面上不知道從哪裏開始尋找這個問題。我只想繼續並鏈接到該網站。下面是該節的HTML：

<div id="navigation"> 
<ul id="navLinks"> 
    <li><a href="home.html">Home</a></li> 


    <li><a href="alston.html">Alston</a></li> 


    <li><a href="booking.html">Booking</a></li> 

    <li><a href="photos.html" class="lastLink">Photos</a></li> 


</ul> 
</div>

這裏是我相信是影響它的唯一CSS：

#navigation { 
    position: relative; 
    //width: 210px; 
    //height: 600px; 
    margin: 2px 0; 
    font-size: 90%; 
    font-weight: normal; 
    clear:both; 
    overflow:hidden; 
} 

//NAVIGATION BAR STUFF 
#navLinks { 
    list-style-type:none; 
    //display:inline; 
    margin-left:auto; 
    margin-right:auto; 
    width: 100%; 
    padding:0; 
    text-align:center; 
    text-decoration: none; 
    overflow:hidden; 
} 

ul#booking { 
color:rgb(84, 154, 14); 
} 

ul#navlinks { 
    text-algin: center; 
    margin: 0; 
    padding: 0; 
} 

ul#navLinks li { display: inline; 
list-style-type: none; 
    line-height: 150%; 
    margin-right: 10px; 
    margin-left: 10px; 
    background-color: #fff; } 

ul#navLinks li a 
{ 
float: left; 
text-align:center; 
background-color: #ADF16A; 
color: #000000; 
text-decoration: none; 
border-left: 0px; 
border-top: 0; 
border-bottom: 0; 
border-right: 1px; 
border-style: solid; 
border-color: #7AE015; 
width:161px; 
padding:3px 0px; 
} 

ul#navLinks a:hover 
{ 
    background-color: #CC7A00; 
} 


ul#navLinks .lastLink{ 
    border:0; 
} 
//ul#navLinks a 
//END OF NAVIGATION BAR STUFF

整個CSS是here

謝謝！

來源

2012-09-13 Jess

您在CSS中使用無效註釋。只允許'/ * * /'。 – j08691

不知道。 Firefox似乎將//當作評論，但未來我會更加小心，因爲標準很重要。 – Jess

你的#navLinks有一些左邊的填充由瀏覽器默認拋出（在我的cas，-webkit-padding-start: 40px;）。如果你定義了padding-left: 0;，那將被覆蓋。

您確實覆蓋了您的style1.css的第195行中的此基準，其中ul#navlinks {的值爲ul#navLinks {。

請確保您拼寫檢查您的text-align s，並在您的CSS文件中大寫時在CSS文件中資本化類和ID。

來源

2012-09-13 15:57:08 crowjonah

該死的只是一個錯字。我注意到了「algin」，但CSS被緩存在服務器上，需要一段時間才能更改。謝謝！ – Jess

如果你添加一個css重置文件到你的站點，它應該修復你的問題，這與你的UL上的填充/保證金有關。

一個css重置文件，在許多其他的事情中，將所有元素的填充和邊距設置爲零 - 讓您可以根據需要自由設置所有樣式。

http://meyerweb.com/eric/tools/css/reset/

來源

2012-09-13 16:03:26

有趣，將有一個去與！謝謝 – Jess

浮動列表有一個縮進，我不明白爲什麼

回答

相關問題