作为一个前端菜鸟，我又碰到问题了，今天把div放到li标签中，发现div并没有把li标签撑开，而是在li标签边界之外，具体情况如下图所示：

那么，怎样才能达到预期的效果（每个li中放置一个div标签，并且显示li的下边框）？只需要修改li标签的overflow属性即可，如下代码所示：

li{

    overflow: auto;

}

ok，问题完美解决，效果如下：

-------------------------------------------------------------------------------------------------

QQ群：871934478

版权所有，转载请注明源地址           

-------------------------------------------------------------------------------------------------

div放在li标签中，无法撑开li标签的问题的更多相关文章

  1. body标签中l的相关标签

    字体标签: h1~h6.font. u.b,.strong. em. sup. sub 排版标签: div,.span.br.hr.center.pre 图片标签: img 超链接: a 列表标签: ...

  2. 37-python中bs4获取的标签中如何提取子标签

    如果只是要提取一个标签 里面的属性值啥的,直接看这篇文章就可以了: 23-python用BeautifulSoup用抓取a标签内所有数据 如果是标签的嵌套,可以参考下面的思路,虽然不是很简洁,但是可以 ...

  3. C#后台实现在Grid标签中动态新增CheckBox标签（WPF中）

    页面代码 <Grid Margin="45,0,10,0" > <Grid.RowDefinitions> <RowDefinition Height ...

  4. 认识HTML中表格、列表标签以及表单控件

    前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...

  5. 关于<a></a>标签里嵌套<a></a>标签的bug

    当你用一个<a></a>标签时,在<a>标签中再插入一个<a></a>,此时,你会发现外面的<a>标签会重复出现,且有点混乱.找 ...

  6. 用正则表达式抓取网页中的ul 和 li标签中最终的值！

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

  7. JQuery中两个ul标签的li互相移动实现方法

    这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...

  8. Html中怎么用CSS让ul中多个li标签不换行横排显示

    布局 通常有三种方式 { 1. position 2. float: left --> 其次是这个 3. block: inline-block  --> 他们推荐我用这个 } 具体描述 ...

  9. LI 标签中让文章标题左对齐，日期右对齐的方法

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html  ...

随机推荐

  1. Go 语言实践（一）

    本文由Austin发表 指导原则 我们要谈论在一个编程语言中的最佳实践,那么我们首先应该明确什么是"最佳".如果您们听了我昨天那场讲演的话,您一定看到了来自 Go 团队的 Russ ...

  2. elasticsearch数据过期删除处理

    一.概述 使用elasticsearch收集日志进行处理,时间久了,很老的数据就没用了或者用途不是很大,这个时候就要对过期数据进行清理.这里介绍两种方式清理这种过期的数据. 1.curator 关于版 ...

  3. Deep learning with Python 学习笔记（8）

    Keras 函数式编程 利用 Keras 函数式 API,你可以构建类图(graph-like)模型.在不同的输入之间共享某一层,并且还可以像使用 Python 函数一样使用 Keras 模型.Ker ...

  4. Keepalived原理与实战精讲

    什么是Keepalived呢,keepalived观其名可知,保持存活,在网络里面就是保持在线了,也就是所谓的高可用或热备,用来防止单点故障(单点故障是指一旦某一点出现故障就会导致整个系统架构的不可用 ...

  5. css布局------上下高度固定,中间高度自适应容器

    HTML <body> <div class="container"> <div class="header"></d ...

  6. vue.js 使用时间组件 日期少一天的问题

    <el-form :inline="true" class="demo-form-inline padding-top-20"> <el-fo ...

  7. c# 判断是否是手机访问

    public static bool CheckAgent() { bool flag = false; string agent = HttpContext.Current.Request.User ...

  8. 【Java并发编程】16、ReentrantReadWriteLock源码分析

    一.前言 在分析了锁框架的其他类之后,下面进入锁框架中最后一个类ReentrantReadWriteLock的分析,它表示可重入读写锁,ReentrantReadWriteLock中包含了两种锁,读锁 ...

  9. 2017-10-10 都市传说: "部分"中文出现乱码

    知乎原链, 作者亦本人 事情起源于项目另一开发者在中文Windows下构建时遇到的部分中文出现乱码问题. 当时很不解的是, 为什么会只有部分出现乱码. 第一感觉是, 如果编码转换不正确, 要么全乱码, ...

  10. ajax小知识

    1.ajax发送get请求时,需要注意如下情况: var uri="http://127.0.0.1:8071/springmvcdemo/bigdataapi/publishdata&qu ...