有时候会遇到ul li列表里面的东西会用到浮动,这个时候ul的高度就不会被撑开,这怎么办呢?

1)最笨的方法就是设置ul的高度,但这种方法很死板,高度不能自适应

2)有次我试着在ul里面加一个清除浮动的div,这样能实现效果,但这种做法是错误的,不符合规范,所以绝对不能这样写。

 <ul>
  <li></li>
  <div style="clear:both"></div>
</ul>

  坚决不能这样写哦!

3)最好的一个办法就是:在ul标签里添加:overflow:hidden;clear:both;这两个样式,妥妥的能让ul的高度撑开。

 <ul style="overflow:hidden;clear:both;">
   <li></li>
</ul>

  这也可以用于任何由于内部内容浮动之后,高度不能自适应的div元素。

  这个方法我感觉比加一个<div style="clear:both"></div>更好一点

清除ul li里面的浮动并让ul自适应高度的一个好办法的更多相关文章

  1. ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给li元素加高,因为加了border之后默 ...

  2. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  3. ul+li水平居中的几种方法

    一.posotion:relative; 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  4. 给li设置float浮动属性之后,无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  5. 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  6. [Web前端] 给li设置float浮动属性之后,无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  7. li浮动时ul高度为0,解决ul自适应高度的几种方法

    网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...

  8. 问题:FF中把UL下的LI设为左浮动UL的背景色就没有了?

    因为容器的子元素设置浮动后, 内容移出了文档流!  解决办法: 1.给个overflow:hidden;作为闭合浮动元素2.设定UL 一个固定的高度 下面是一些与之相关的解决办法,参考文章<那些 ...

  9. float浮动引起的ul高度崩溃与overflow的关系

        今天遇到的问题真的让人不得不吐槽,因为一个很小的问题,花费了半天的时间来才解决这个问题.一直认为自己对Html与Css了解应该算蛮不错的,但是今天遇到的事情让我不得不反省自己的学习心态上的错误 ...

随机推荐

  1. 修改sga_max_size大小后重启数据库报 ORA-00851

    http://blog.itpub.net/30150152/viewspace-1449898/

  2. 我的github地址

    链接:https://github.com/long0123/test.git   推送项目的github的大致步骤如下: 1.在本地创建一个项目仓库,可以放些基本的项目文件 2.cd至该目录下 3. ...

  3. Python学习笔记 ---第三章

    函数 函数是代码的一种抽象 函数 说明 abs 绝对值 max 最大值 hex 转换为16进制 强制数据类型转换 int('123') 123 int(12.35) 12 srt(100) '100' ...

  4. github作业

    链接:   https://github.com/liuyu13/liuyu13-1 总结:git可以学习的东西还有很多.git协议,分布式协作,git项目管理,git技巧,github的使用和实践, ...

  5. servlet请求转发

    来源:http://www.2cto.com/kf/201610/554591.html 请求转发:Servlet(源组件)先对客户请求做一些预处理操作(数据处理),然后把请求转发给其他Web组件(目 ...

  6. 全新OCR3500数据

    改装: 手变6700,夹器彦豪R741,牙盘5700,前拨5700,后拨5701,飞轮5700,链条YBN S10 S2,弯把DEDA RHM01,前叉山寨BIANCHI K-VID,轮组FULCRU ...

  7. 如何删除GitHub或者GitLab 上的文件夹

    如何删除GitHub或者GitLab 上的文件夹   需求分析 假设小明有一天不小心把本地仓库的一个文件夹A推送到了远程GIT服务器(例如:github,gitlab,gitee)上,此时想删除远程仓 ...

  8. 安装rlwrap 的简单方法

    1. 下载安装 epel包 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 2. 安装r ...

  9. Visual Studio 2017 激活密钥 [复制记录]

    Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...

  10. ViewDragHelper

    参考:Android 之 ViewDragHelper 详解   Android 之 ViewDragHelper详解(二) 看了几篇博客,并参考了上面的两篇博客,整理一下ViewDragHelper ...