论坛

标题: 关于使用 float：left,之后再居中的问题。 [打印本页]
作者: 能猫大侠    时间: 2017-3-31 21:35
标题: 关于使用 float：left,之后再居中的问题。
学习韩文强老师的：《html+css网页前端课程 > 2.7.添加浮动和清除浮动及导航条案例》有点疑问恳请老师解答。

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

css代码如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>2.7百度百科导航条</title>
  6. <style type="text/css">
  7. * {
  8.                 margin: 0;padding: 0px;}
  9. ul{ list-style: none;/*去除列表前的点*/}
  10.         .nav { width: 100%; height: 40px; background-color:hsla(210,90%,62%,1.00); margin-top: 100px;}
  11.         .nav ul{ width: 1000px; height: 40px; border: red solid 1px; margin: 0 auto;}
  12.         .nav li{ float:left;/*列表页的显示到一行*/}
  13.         .nav li a{  width: 120px; height: 40px; background-color: red ; display: block;/*把块级元素转换为行级元素，从而可以设置宽和高*/ text-align: center; line-height: 40px;}
  14.         </style>
  15. </head>

  17. <body>
  18. <div class="nav">
  19.         <ul>
  20.                 <li> <a  href="#">首页</a></li>
  21.                 <li> <a  href="#">分类</a></li>
  22.                 <li> <a  href="#">特色百科</a></li>
  23.                 <li> <a  href="#">用户</a></li>
  24.                 <li> <a  href="#">权威合作</a></li>
  25.                 <li> <a  href="#">手机百科</a></li>

  27.         </ul>
  28.        
  29. </div>
  30. </body>
  31. </html>
复制代码


作者: 能猫大侠    时间: 2017-3-31 21:47
我的意思是让导航中的栏目都再往左点，从而居中，更加好看。使用 margin：0 auto; 无作用。
[attach]88309[/attach]

作者: 能猫大侠    时间: 2017-4-5 16:08
顶一顶，希望老师能够看见。最好能在我的代码上直接修改。
感谢！
作者: zhao    时间: 2017-4-5 16:17
先普及一下知识点。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
主要是你这个ul的宽度是1000px撑开的，你把宽度改为720px就居中了。
作者: 能猫大侠    时间: 2017-4-6 08:02
zhao 发表于 2017-4-5 16:17
先普及一下知识点。div和UL，li都是块级元素。什么是块级元素呢？你可以认为它就是和在建房子的时候，一块 ...

谢谢 老师的回复。果真可以了！感谢~~·
作者: 能猫大侠    时间: 2017-4-6 08:02
潜意式 发表于 2017-4-5 16:17
主要是你这个ul的宽度是1000px撑开的，你把宽度改为720px就居中了。

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



欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1