css导航栏的疑问

    <style type="text/css">
      .nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: aquamarine;
      }
      ul.nav a {
       float: left;
        display: block;
        height: 2em;
        line-height: 2em;        
      }
    </style>
</head>
<body>
<ul class="nav">
  <li><a href="">home</a></li>
  <li><a href="">likn</a></li>
  <li><a href="">joe</a></li>
</ul>

得到的效果是这样的
图片描述
奇怪为什么会这样？
应该是这样的吧

li元素是块级元素并且上下摞起来排列的，那么就算a标签浮动起来也是在li元素里的左边啊，怎么会水平排列了?

仔细看了楼下所有小伙伴的答案，结合自己的理解总结一下，浮动不仅看设置了浮动属性的元素本身，还要看它的父元素，如果父元素没有足以支撑浮动元素的宽高设置，那么浮动元素就会带着父元素一起浮动
图片描述
如果

        li {
            border: 1px solid red;
            height: 20px; /*给li设置高度*/
        }

或者

    <li><a href="">home</a>kkkkk</li>  /*给li填充内容*/
    <li><a href="">concat</a>kkkk</li>
    <li><a href="">back</a>kkkk</li>

图片描述

感谢楼下各位，谢谢你们的无私分享

css

阅读 3.6k

6 个回答

得票最新

YutHelloWorld

发布于
2016-08-19

✓ 已被采纳

原因是设置了<a>标签浮动以后，父元素<li>没有被撑开，解决代码：

方案一：

设置<a>为行内块元素

    <style type="text/css">
        .nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: aquamarine;
        }
        ul.nav a {
            display: inline-block;
            height: 2em;
            line-height: 2em;
        }
    </style>
</head>
<body>



<ul class="nav">
    <li><a href="">home</a></li>
    <li><a href="">likn</a></li>
    <li><a href="">joe</a></li>
</ul>

方案二：

对<li>的after清除浮动

 <style type="text/css">
        .nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: aquamarine;
        }
        ul.nav a {
            float: left;
            display: block;
            height: 2em;
            line-height: 2em;
        }
        li:after{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>



<ul class="nav">
    <li><a href="">home</a></li>
    <li><a href="">likn</a></li>
    <li><a href="">joe</a></li>
</ul>

boomler

55521320

发布于
2016-08-19

1、li确实还是块级元素，并且占据100% 的宽度
2、因为float的存在，实际上li元素的显示高度是0
3、你对li设置一个border你就知道了····

七橘子

63831530

发布于
2016-08-19

a标签是li的子集，a标签添加浮动后，a会脱离正常流，那么受之影响的是父级li，li没有内容撑起高度和宽度，所以li的高度宽度为0.解决li这种状况的解决方案有：li（父级）清除浮动，或者给li自己加宽高。

安歌

7k1313

发布于
2016-08-19

其实楼上回答到<a>标签设置了浮动，所以引起父容器塌陷的，都答到了关键点，不过我想补充一下：题目的问题我觉得要回答两个方面:
1.关于三个<a>标签为什么在同一行显示,因为设置float属性的元素引起了父元素塌陷，所以li元素的高度为0，这一点，楼上几乎都说到了
2。既然三个li的高度为0，那后面的<a>为什么没有直接覆盖在原先的<a>标签上，而是一个接一个排列呢？这一点，就要讲到float的脱离文档流特性：设置了浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，这是什么意思呢？我们知道。在css中，float和position:absolute都有脱离文档流的特性，但是设置absolute的对象，是完全脱离文档流，包括文档空间和文本空间，举题主的例子来说，如果把flat:left改成position：absolute，那效果就是这样的：图片描述
全部的<a>元素会叠在一起，就像处在不同的z轴高度一样；而float只脱离文档空间而保留文本空间，所以就出现题主中的情况了.