使用css在div中定位ul和li

Question

使用css在div中定位ul和li

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

Run Code Online (Sandbox Code Playgroud)

在CSS我想做的事情如下:

div#navbar_div {
    float:right;
}

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

div#navbar_div .li {
    display: inline;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cha*_*era 11

首先,你应该删除你的CSS 中的.标志ul.我们使用.signt定义一个类,并使用#符号来定义一个id.但对于html提供的默认元素或标签,我们不想使用它们.我们可以使用name.as一个例子,如果我们把一些样式放到身体,我们可以像这样写.

body{
 background-color:black;
}

Run Code Online (Sandbox Code Playgroud)

为了得到一个更好的主意,我为你写了一个小代码.这将有所帮助

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，9 月前
查看次数：	28256 次
最近记录：	7 年，2 月前