Question

我试图找到一种方法来定位<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>

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

div#navbar_div {
    float:right;
}

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

div#navbar_div .li {
    display: inline;
}

Answer 1

首先，您应该从css中的.移除ul符号。我们使用. signt定义类和#符号来定义 id 。但对于html提供的默认元素或标签，我们不想使用它们。我们可以使用name.as一个例子，如果我们把一些样式放到正文，我们就可以这样写。

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>

Answer 2

删除ul和li之前的句点。期间表示课程。 ul和li是原生HTML标记，因此您可以按原样引用它们。

Answer 3

.navbar_div ul , .navbar li {
 //whatever goes here
}

使用css在div中定位ul和li

3 个答案: