HTML列表類

Question

所以對於我的Tafe工作，一個要求是有一個無序列表。 我有一個菜單，但它與我試圖製作的列表發生衝突。

這裏的小提琴：http://jsfiddle.net/tHLY7/1/

如果刪除：

li { 
    display: inline; 
} 

它顯示列表我怎麼想，但毀了我的菜單。 有什麼想法？

Answer 1

您需要告訴顯示器：內聯只能在導航上。

#Menubar ul li { display: inline; } 

Answer 2

你的造型li { display: inline }將適用於所有<li>頁面，無論他們在哪裏上。我會建議只針對<li>這是你的菜單的一部分。在你的情況下，

#menu li { display: inline; }。

或許，

#Menubar li { display: inline }。

（注：一個字，雖然，ID和在HTML類是按照慣例，所有小寫，所以你應該改變<div id="Menubar">到<div id="menubar">

Answer 3

我做了一些改進整體：http://jsfiddle.net/oneeezy/tHLY7/4/

這裏是一些提示

1.）你不應該使用「#ID」爲樣式目的，只需使用JavaScript的鉤子#ID，總是使用「.class」樣式和像別人說的，保持小寫。

2.）總是使用「reset.css」文件。我附上了我知道HTML5樣板網站上存在的最好的重置文件。您可以在該文件中處理很多「基本」風格。在您的reset.css文件後使用stylesheet.css文件

3.）就像其他人說的，如果頁面上有多個元素（在本例中爲ul），那麼您必須通過類名並具體告訴它你想做什麼。否則它將採用reset.css文件的樣式。

4.）2個非常重要的風格已被添加！

• 清除修復（我打電話這個「.row」，這是爲了使事情下降到下一行（就像打在Microsoft Word中的‘返回’鍵）

• 的最佳方式盒子大小是你最好的朋友！它正確地做「填充」行爲，不給你的元素有它。我給它的「*」對一切申請增加空間。

   /* Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. */ 
       *, *:after, *:before { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
  
       /* Clear Fix - This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word) */ 
       .row:before, .row:after { content: " "; display: table; } 
       .row:after { clear: both; } 
       .row { *zoom: 1; clear: both; } 
  
       /* This "wrapper" goes around everything and makes your content stay in the middle of the page */ 
       .wrapper { width: 90%; margin: 0 auto; } 
  
       /* Navigation */ 
       .menu { background: #000; width: 100%; float: left; display: block; } 
       .menu ul { color: #fff; float: right; } 
       .menu ul li { float: left; display: block; } 
       .menu ul li a { display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; } 
       .menu ul li a.active { background: #333333; display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; } 
       .menu ul li a:hover { background: #333333; color: #fff; } 
  
       /* Main Content */ 
       .main { padding: .5em 0; } 
       .main h1 { margin: .5em 0; } 
       .main ul { } 
       .main ul li { list-style: inside; } 
  

我希望這有助於！