Question

因此，对于我的Tafe工作，一个要求是有一个无序列表。我有一个菜单，但它与我试图制作的列表发生了冲突。

如果删除：

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 }。

（但需要注意的一点是，HTML中的ID和类按惯例，都是小写的，因此您应该将<div id="Menubar">更改为<div id="menubar">。

Answer 3

我总体上取得了一些进步：http://jsfiddle.net/oneeezy/tHLY7/4/

以下是一些提示

1。）你永远不应该使用＆＃34;＃ID＆＃34;出于样式的目的，只需将#ID用于javascript钩子，总是使用＆＃34; .class＆＃34;造型和其他人说的一样，保持小写。

2。）始终使用＆＃34; reset.css＆＃34;文件。我已经附加了HTML5样板网站上存在的最佳重置文件。你可以照顾你的很多基地＆＃34;该文件中的样式。在reset.css文件

之后使用stylesheet.css文件

3。）就像其他人说的那样，如果页面上有多个元素（在本例中为ul），那么你必须通过类名来定位特定的ul并告诉它你想要它的具体内容做..否则它将采用reset.css文件中的样式。

4。）添加了2个非常重要的样式！

明确修复（我称之为＆＃34; .row＆＃34;，这是使事情下降到下一行的最佳方法（如点击＆＃34;返回＆＃34） ;键入微软词）

盒子大小是你最好的朋友！它使＆＃34;填充＆＃34;行为正确，并没有为拥有它的元素增加空间。我给了它＆＃34; *＆＃34;适用于所有事情。

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

我希望这有帮助！

HTML列表类

3 个答案: