请老师检查，想请教下老师，
来源：2-12 编程练习
qq_慕容254374
2020-03-14 22:34:08
如果用ul来设置底部菜单栏的话，是设置定宽来设置居中比较好还是通过添加父容器添加定位比较好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局</title>
<style type="text/css">
body{
margin: 0;padding: 0;width:100%;height:auto;margin:0 auto;font-size: 20px;
}
.header{
width: 100%;height: 100px;background:black;margin: 0 auto;
}
.logo img{
display: block;float: left;
}
.nav ul{
float: right;line-height: 100px;margin: 0;
}
.nav ul li{
list-style:none;color:blue;float: left;margin: 0 30px;color: white;cursor: pointer;
}
.bodyer{
width: 100%;height: 1000px;auto;background: #87cefa;margin: 0 auto;padding-left:150px;
}
.container{
width: 100%;height: auto; padding-left:100px;
}
/* 通过父元素的内边距让文本靠中心显示 */
.left{
width:33%;float:left;padding-top:150px;
}
span{
background-color: coral;
}
.middle{
width:33%;float:left;padding-top:150px;
}
.right{
width:33%;float:left;padding-top:150px;
}
.text{
width:200px;height:30px;margin-bottom: 15px;padding: 0;font-size:12px;
}
/* 设置文本框的CSS样式 */
.sub{
width:200px;height:30px;background-color: orangered;margin: 0;border:none;
}
/* 设置按钮的样式 */
.footer{
width:100%;height:100px;position: fixed;bottom:0px;background:black;margin: 0 auto;
}
.footer div{
float: left;
position: relative;
left:50%;
}
/* 给父容器添加定位来实现居中 */
.footer ul{
line-height: 100px;position: relative;left:-50%;padding: 0;margin: 0;
}
/* 设置父元素一样的行高可以让元素垂直居中，消除内外边框 */
.footer ul li{
color: white;list-style:none;float: left;margin:0 30px;cursor: pointer;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://climg.mukewang.com/59093e9c00016ce303000100.png"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="bodyer">
<div class="container"></div>
<div class="left">
<h3>课程推荐</h3>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> iOS常用语法和基础控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> Java入门开发</p>
</div>
<div class="middle">
<h3>相关课程</h3>
<p>HTML CSS javascript</p>
<p>HTML5 CSS3 jquery</p>
<p>移动端基础 移动端app开发</p>
</div>
<div class="right">
<h3>登录</h3>
<form>
<input type="text" name="user" class="text" placeholder="请输入登录邮箱/手机号"/>
<br/>
<input type="password" name="pwd" class="text" placeholder="6-16位密码，区分大小写，不能用空格"/>
<br/>
<input type="submit" name="sub" value="登录" class="sub"/>
</form>
</div>
</div>
</div>
<div class="footer">
<div>
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2020-03-15
同学你好， 可以调整li的display属性为inline-block;让其在一排显示，然后给ul添加text-align:center;属性实现内容水平居中效果，这样就可以省去宽度的定位的位置计算了。
在你的另一提问下，http://class.imooc.com/course/qadetail/203320 老师给出了详细的解决方案，快去查看看一下吧，祝学习愉快~
0
相似问题