关于css中ul高度的问题

html-css05

关于css中ul高度的问题,第1张

①首先你的<li>是浮动的,也就是说li脱离了文档流,故它的父级ul是无法包围li的,所以li的内容增大缩小跟ul关系是不大。

②如果是你想实现:让li水平排列。同时div的内容增加后,div向下延伸。

可以直接限制li的宽度:

li {

      float:left

      width:100px

  }

效果如下:

<ul>

      <li>

          <div>测试信息a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>

      </li>

      <li>

          <div>测试信息</div>

      </li>

      <li>

          <div>测试信息bb b b b b b b b b b b b b b b b b b b</div>

      </li>

  </ul>

可以试试给.nav li 加上样式overflow:hidden或者zoom:1触发haslayout

不过既然指定了line-height:50px不如把height也设为50px

这个很显然了,你是在li下面使用了padding(内边距)相对的是外边距margin

padding:25px 0px 25px 0px 的意思是上:25px 右:0px 下:25px 左:0px

你设置的li每个会在上边挤出25px和在下边挤出25px的空位,你可以给他们分别加上背景颜色background来查看,这就是下面那么多空行的原因!

希望帮助到你,不懂的就百度HI我!