Html 使用 css 在 div 中定位 ul 和 li
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36026530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Target ul and li within div using css
提问by Dan James Palmer
I'm trying to find a way to target the <ul>and <li>markups but only within a specific <div>, not for the entire page. I have this in the HTML:
我试图找到一种方法来定位<ul>和<li>标记，但仅限于特定的<div>，而不是整个页面。我在 HTML 中有这个：
<div id="navbar_div">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
In the CSS I would like to do something like:
在 CSS 中，我想做一些类似的事情：
div#navbar_div {
float:right;
}
div#navbar_div .ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div#navbar_div .li {
display: inline;
}
回答by Chanaka Caldera
first thing is you should remove the .sign from the ulin your css.
we use .signt to define a classand #sign to define an id.
but for default elements or tags provided by html, we don't want to use those. we can use just there name.as an example if we put some style to body we can write like this.
第一件事是你应该.从ul你的 css 中删除符号。我们使用.signt 定义一个类并使用#sign 定义一个id。但是对于 html 提供的默认元素或标签，我们不想使用它们。我们可以只使用名称。例如，如果我们将一些样式添加到正文中，我们可以这样写。
body{
background-color:black;
}
to get an better idea, I wrote a small code for you.hope this will help
为了获得更好的主意，我为您编写了一个小代码。希望这会有所帮助
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
margin:0;
padding: 0;
}
/* add styles only to for 'ul' element, inside the id="one" div */
div#one ul{
list-style-type: none;
color: orange;
}
/* add style only to the 'li' elements inside the id="one" div. this means 'li' inside the 'ul' inside the 'div' which its id="one" */
div#one ul li{
display: inline;
margin: 20px;
}
</style>
<body>
<div id="one">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
<div id="two">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</body>
</html>回答by Eric Guan
Remove the periods before uland li. Periods signify classes. uland liare native HTML tags, therefore you can reference them as they are.
前取出周期ul和li。句号表示等级。ul和li是原生 HTML 标记，因此您可以按原样引用它们。
回答by Matthew Gaim
.navbar_div ul , .navbar li {
//whatever goes here
}
