论坛

标题: 无序列表的位置控制问题 [打印本页]

作者: 爰昔 时间: 2016-12-11 11:11
标题: 无序列表的位置控制问题
本帖最后由爰昔于 2016-12-11 11:20 编辑

我在div里面添加的无序列表，可是为什么无序列表在div外面，位置不受div控制呢，那怎么控制无序列表的位置呢？[attach]75804[/attach][attach]75803[/attach]

作者: 潜意式 时间: 2016-12-12 17:58
是不是上面还有css样式没有截图出来呀？

作者: 爰昔 时间: 2016-12-13 12:12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-family: "微软雅黑", "华文细黑";
font-size: 12px;
line-height: 55px;
color: #3D3753;
font-weight: bold;
background-color: #FBFBFB;
background-image: url(imges/6-01.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#menu {
height: 55px;
width: 640px;
margin-left:230px;
margin-top: 184px;
}
#menu li {
text-align: center;
float: left;
height: 55px;
width: 102px;
list-style-type: none;
}
.font01 {
color: #FFFFFF;
}
#menu ul {
text-align: left;
}
</style>
</head>

<body>
<div id="menu">
<ul>
<li class="font01">网站首页</li>
<li>关于我们</li>
<li>美味体验</li>
<li>销售网络</li>
<li>我们的故事</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>

不知道无序列表的位置怎么控制呢，插入在div里面为什么位置不受div控制呢？

作者: 潜意式 时间: 2016-12-13 18:49
body的样式里面line-height: 55px;这个影响到了li中文字垂直居中了。删掉这个，文字就回到正确位置了。

作者: 爰昔 时间: 2016-12-14 11:14

终于做好了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body {
font-family: "微软雅黑", "华文细黑";
font-size: 14px;
font-weight: bold;
color:#3D3753;
line-height: 55px;
background-color: rgba(255,255,255,1);
background-image: url(imges/6-01.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#menu {
height: 55px;
width: 642px;
margin-right: auto;
margin-left:auto;
padding-top: 191px;
}
.font01 {
color: rgba(255,255,255,1);
}
#menu ul li {
float: left;
height: 55px;
width: 107px;
text-align: center;
list-style-type: none;
}
</style>
</head>

<body>
<div id="menu">
<ul>
<li class="font01">网站首页</li>
<li>关于我们</li>
<li>美味体验</li>
<li>销售网络</li>
<li>我们的故事</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>

经过不断的和老师的代码对比尝试，我发现是因为老师的代码中有一个
* {
margin: 0px;
padding: 0px;
}在起作用，加上就好了

可能是老师讲我没有注意到，请问老师这个*表示什么呢？

欢迎光临论坛 (http://bbs.qinxue.com/)