怎么把UL标签排成一列放在顶部,为什么顺序会颠倒?而且还放不进去顶部的DIV中？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度任务2</title>
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%;background-color:#121010;}
#header img{width:282px;height:50px;}
#header ul{display:inline-block;float:right;width:100%;padding:0;margin:0;list-style-type:none;}
#header li{width:7em;text-decoration:none;color:white;padding:0.2em 0.6em;}
#header a:hover{background-color:#F5F5F5;}
#header li{display:inline;}
</style>
</head>
<body>
<div id="header"><img src="iamge/QQ图片20161114121120.png" alt="logo">
<div><ul>
<li><a href="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li><a href="#">导航链接四</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="top1"></div>
<div class="top2"></div>
<div class='top3"></div>
<div class="top4"></div>
</div>
<div class="footer"></div>
</body>
</html>
这是全部的代码。我加上效果图。
下面的死歌导航LI标签怎么放到黑色部分去就像这张图的效果
晓白菜2回答
-
甜甜圈1991
<!doctype html><html><head><meta charset="utf-8"><title>百度任务2</title><style type="text/css">*{margin:0;padding:0; color:red; } #header{ background-color:#121010; background:#000; height:50px; padding:5px;} #header img{width:282px;height:50px;float:left;}#header #nav ul{list-style-type:none; height:50px; background:green; line-height:50px; margin-left:30px; float:left;}#header #nav ul li{width:100px; display:inline-block; text-decoration:none; color:white; background:yellow;text-align:center}#header #nav ul li a{display:block;}#header #nav ul li a:hover{background-color:#F5F5F5;} </style></head><body><div id="header"> <div class="logo"> <img src="bd_logo1.png" alt="logo"> </div> <div id="nav"> <ul> <li><a href="#">导航链接一</a></li> <li><a href="#">导航链接二</a></li> <li><a href="#">导航链接三</a></li> <li><a href="#">导航链接四</a></li> </ul> </div></div> </body></html> -
渺渺爱学习
可以把第二个div换成span标签，img也用span标签包裹，span是一个行级标签，可以让你的内容在一行显示。
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5