布局 2-9 编程练习
底部导航的水平居中。怎么实现。，方便划，可以给说一下，使用ul和li写导航怎么写。谢谢老师。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body,ul,li{
margin:0;padding:0;list-style:none;font-family:"黑体";
}
.header{
width:100%;
height:100px;
background:#000;
}
.logo{
width:200px;
height:100px;
float:left;
}
.nav{
width:600px;
height:100px;
line-height:100px;
float:right;
text-align:center;
}
.nav a{
font-size:24px;
color:#fff;
text-decoration:none;
padding:20px;
}
.main{
width:100%;
height:1000px;
background:#00FFFF;
}
.left{
width:40%;
height:1000px;
float:left;
position:relative;
}
.left_content{
position:absolute;
top:100px;
left:100px;
}
.left_content p span{
display:inline-block;
width:80px;
height:30px;
text-align:center;
line-height:30px;
background:#f00078;
}
.right{
width:60%;
height:1000px;
float:right;
position:relative;
}
.right_content{
position:absolute;
top:100px;
left:120px;
}
.footer{
width:100%;
height:100px;
background:#000;
}
.footer ul{
width:900px;
height:100px;
margin:0 auto;
background:blue;
line-height:100px;
}
.footer ul li{
float:left;
}
.footer ul li a{
color:#fff;
text-decoration:none;
font-size:20px;
padding:20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<a href="#">课程</a>
<a href="#">课程</a>
<a href="#">课程</a>
<a href="#">课程</a>
<a href="#">课程</a>
</div>
</div>
<div class="main">
<div class="left">
<div class="left_content">
<h1>课程推荐</h1>
<p><span>职业路径</span> HTML5和CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门前段</p>
<p><span>职业路径</span> ios基础控件说明</p>
<p><span>职业路径</span> PHP入门教程</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
</div>
<div class="right">
<div class="right_content">
<h1>相关课程</h1>
<p>HTML CSS javascript</p>
<p>HTML5 CSS3 jquery</p>
<p>移动端基础 移动APP开发</p>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">友情链接</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
</ul>
</div>
</body>
</html>
正在回答
你好，按照上述老师的方法，整容内容（文字导航）已经可以实现居中了，这里不同的方式。text-align属性与浮动有冲突。若想使用text-align的话，建议：可以去掉li的浮动，设置行内元素，然后给ul设置text-align。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星