HTML列表类

所以对于我的Tafe工作，一个要求是有一个无序的列表。 我有一份菜单，但它与我试图制作的列表冲突

这是小提琴：

如果删除：

li {
    display: inline;
}

它显示了我想要的列表，但破坏了我的菜单。

---

有什么想法吗？

您需要告诉显示器：inline仅在导航上

#Menubar ul li { display: inline; }

---

您的样式设置

li{display:inline}

将应用于页面上的所有

，无论它们位于何处。我建议只针对菜单中的

。就你而言

#菜单li{display:inline；}

或者

#菜单栏li{display:inline}

---

（需要注意的是，HTML中的ID和类按惯例都是小写的，因此您应该将

更改为

总体上我做了一些改进：

以下是一些提示

1.）永远不要使用“#ID”进行样式设置，只需使用#ID进行javascript挂钩，始终使用“.class”进行样式设置，就像其他人说的那样，保持小写

2.）始终使用“reset.css”文件。我附上了我所知道的HTML5样板文件网站上最好的重置文件。您可以在该文件中处理许多“基本”样式。在reset.css文件之后使用stylesheet.css文件

3.）正如其他人所说，如果一个页面上有多个元素（在本例中为ul），则必须通过类名将该特定ul作为目标，并明确告诉它您希望它做什么。。否则，它将采用reset.css文件中的样式

4.）添加了2种非常重要的样式

• 清除修复（我称之为“.row”，这是让事情转到下一行的最佳方式（如在microsoft word中按“return”键）

• 框大小是你最好的朋友！它使“填充”正确地起作用，不会给元素添加空间。我给它加了“*”以适用于所有元素

          /* 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; }
  

---

我希望这会有帮助！

这也很快，而且效果很好。你是个救生员！随时都可以。很高兴为你服务。