使用CSS類導致問題

設置我.nav類我的導航菜單，但是當我使用它，它似乎會導致問題，當我刪除.nav和離開只是ul li它修復它，但也有一個保證金的問題。使用CSS類導致問題

的問題是我評論/ 問題/ http://jsbin.com/fupewijame/1/

您必須刪除.nav

.nav ul li{ 
    width: 100%; 
}

，並更改爲

ul li{ 
    width: 100%; 
}

這有點兒修復它的底部但你可以看到一個保證金錯誤。我也必須使用.nav類，因爲我不希望它是全球性的。請幫我看不到的bug

代替：

.nav ul li{ 
width: 100%; 
}

使用：

.nav li{ 
     width: 100%; 
     margin-bottom: 0; 
    }

，如果你不希望有一個保證金

.nav{ 
    margin: 0; 
    padding: 0; 
}

2015-02-24 05:22:52

謝謝，但仍然存在誤差？也有任何理由，爲什麼這有效？ – GoogleFailedMe 2015-02-24 05:38:01

你的意思是你不想在你的列表項之間留有餘量？ – 2015-02-24 05:41:45

我的意思是邊緣和列表頂部的邊距。我希望它連接並與顯示菜單欄對齊 – GoogleFailedMe 2015-02-24 05:53:32

我我不完全確定你希望它看起來像100％的寬度。如果您提供更多信息，我可以進一步提供幫助。

但是，我注意到一些可能會混淆CSS的東西。

1）由於將浮動值應用於列表項目，高度顯示爲「0」。當您將float應用於項目時，它們將從文檔的正常流程中移除。

來解決，首先嚐試刪除此：

.nav li { 
    float: left; 
}

2）大多數瀏覽器添加默認填充和/或保證金OL和UL

我建議你重置，然後嘗試風格。

RESET：

ul { 
    margin: 0; 
    padding: 0; 
}

TARGET RE式：

.nav { 
    margin: /* your style here */; 
    padding: /* your style here */; 
}

2015-02-24 05:50:09

這

.nav ul li{ 
    width: 100%; 
}

是說：

由於.nav是一類你ul的，而不是你的ul的祖先的，你應該使用

ul.nav li { 
    width: 100%; 
}

代替：

編輯：對於保證金問題，您應該使用position: relative;代替position: absolute;，不應該，如果沒有完全被使用意識到它是如何工作的

2015-02-24 09:43:49

回答