关于使用 float：left,之后再居中的问题。

登录

学习韩文强老师的：《html+css网页前端课程 > 2.7.添加浮动和清除浮动及导航条案例》有点疑问恳请老师解答。

是关于导航栏的块级元素使用：float：left;变为平铺以后，文字都靠左了，该怎样让文字居中呢？
如图所示：

css代码如下：

<!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=gb2312" />
<title>2.7百度百科导航条</title>
<style type="text/css">
* {
margin: 0;padding: 0px;}
ul{ list-style: none;/*去除列表前的点*/}
.nav { width: 100%; height: 40px; background-color:hsla(210,90%,62%,1.00); margin-top: 100px;}
.nav ul{ width: 1000px; height: 40px; border: red solid 1px; margin: 0 auto;}
.nav li{ float:left;/*列表页的显示到一行*/}
.nav li a{ width: 120px; height: 40px; background-color: red ; display: block;/*把块级元素转换为行级元素，从而可以设置宽和高*/ text-align: center; line-height: 40px;}
</style>
</head>
<body>
<div class="nav">
<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>

复制代码

能猫大侠 · 发表于 2017-3-31 21:47:01

我的意思是让导航中的栏目都再往左点，从而居中，更加好看。使用 margin：0 auto; 无作用。

能猫大侠 · 发表于 2017-4-5 16:08:34

顶一顶，希望老师能够看见。最好能在我的代码上直接修改。
感谢！

zhao · 发表于 2017-4-5 16:17:11

先普及一下知识点。div和UL，li都是块级元素。什么是块级元素呢？你可以认为它就是和在建房子的时候，一块一块的砖。但是这个砖是形状规则不一样的砖。
这个地方的居中与float没有必然关系，float起到的作用是使得元素在自己定义块中相对的位置。如果在实际的项目中，块级元素因为浮动导致位置变形，可使用claer 清除前面的元素浮动。（这是题外话，下面说一下这个地方导致的原因）
li在最开始有普及是块级元素，ul也是。你在css中定义了UL的宽度是1000PX。你的li是每个120PX，那么6个li是720px。剩余的一块多出来肯定会占据一块地方。
如果把你的.nav ul{ width: 1000px; height: 40px; border: red solid 1px; margin: 0 auto;}
改成.nav ul{ width: 720px; height: 40px; border: red solid 1px; margin: 0 auto;}
试试看呢？

潜意式 · 发表于 2017-4-5 16:17:43

主要是你这个ul的宽度是1000px撑开的，你把宽度改为720px就居中了。

能猫大侠 · 发表于 2017-4-6 08:02:08

zhao 发表于 2017-4-5 16:17
先普及一下知识点。div和UL，li都是块级元素。什么是块级元素呢？你可以认为它就是和在建房子的时候，一块 ...

谢谢老师的回复。果真可以了！感谢~~·

能猫大侠 · 发表于 2017-4-6 08:02:34

潜意式发表于 2017-4-5 16:17
主要是你这个ul的宽度是1000px撑开的，你把宽度改为720px就居中了。

谢谢老师的回复。果真可以了！感谢~~·

[提问] 关于使用 float：left,之后再居中的问题。

本帖子中包含更多资源

共6个回复最后回复于 2017-4-6 08:02

本帖子中包含更多资源

浏览过的版块

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

[提问] 关于使用 float：left,之后再居中的问题。

本帖子中包含更多资源

共6个回复 最后回复于 2017-4-6 08:02

本帖子中包含更多资源

浏览过的版块

共6个回复最后回复于 2017-4-6 08:02