使用 css 在 div 中定位 ul 和 li

我正在尝试找到一种方法来定位 <ul> 和 <li> 标记，但仅在特定的 <div> ,83- 整个页面内我在 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>

在 CSS 中，我想做类似的事情：

 div#navbar_div {
    float:right;
}

div#navbar_div .ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div#navbar_div .li {
    display: inline;
}

原文由 Dan James Palmer 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 892

第一件事是你应该从你的CSS中的 ul 中删除 . 标志。我们使用 . signt 来定义一个类和 # sign 来定义一个 id 。但是对于 html 提供的默认元素或标签，我们不想使用它们。我们可以只使用 name. 作为例子，如果我们给 body 加上一些样式，我们可以这样写。

 body{
 background-color:black;
}

为了得到一个更好的主意，我为你写了一个小代码。希望这会有所帮助

 <!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>

原文由 caldera.sac 发布，翻译遵循 CC BY-SA 4.0 许可协议

使用 css 在 div 中定位 ul 和 li

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译