无序列表的位置控制问题

登录

本帖最后由爰昔于 2016-12-11 11:20 编辑

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

潜意式 · 发表于 2016-12-12 17:58:44

是不是上面还有css样式没有截图出来呀？

爰昔 · 发表于 2016-12-13 12:12:53

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

body的样式里面line-height: 55px;这个影响到了li中文字垂直居中了。删掉这个，文字就回到正确位置了。

爰昔 · 发表于 2016-12-14 11:14:30

终于做好了

<!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;
}在起作用，加上就好了

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

[提问] 无序列表的位置控制问题

本帖子中包含更多资源

共4个回复最后回复于 2016-12-14 11:14

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 无序列表的位置控制问题

本帖子中包含更多资源

共4个回复 最后回复于 2016-12-14 11:14

共4个回复最后回复于 2016-12-14 11:14