div放在li标签中,无法撑开li标签的问题

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

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

li{
    overflow: auto;
}

ok,问题完美解决,效果如下:

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

QQ群:871934478

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

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

原文地址:https://www.cnblogs.com/yiliangmi/p/10522063.html

时间: 2024-10-08 17:56:55

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

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

获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1";            string htmlStr = null;            for (int i = 0; i < 10; i++)            {                try                {                    System.Net.Http

ie下li标签中span加float:right不换行问题解决方案

在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li> <li><a href=“#”>BEST SUSHI MENU</a> <span&g

jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码

转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元素后插入指定的内容. 综合起来,核心代码为 $(".content li").click(function() {       // 点击li元素时     if($(this).next())                    // 如果存在下一个元素         $(this)

table标签中不能有div、span等标签

table标签中不能有div.span等标签   今天在<table>标签中放置了个<span>标签,结果用span的id去修改其中innerHTML的值时, 发现取值在不同浏览器中有问题! 解决:就是不能随便放置<span>标签在<table>中!!! DIV不能直接加在table中,放在td中即可 来自为知笔记(Wiz)

多个ul中第一个li获取定位

多个ul中第一个li获取定位 如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul li").first(); $("ul li").slice(0,1);//slice第一个参数表示的选取开始的位置,第二个参数是结束的位置 <ul> <li>安哲</li> <li>安哲</li

让DIV标签中的P标签水平和垂直都居中

http://blog.csdn.net/yaoyyl/article/details/50548589 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>让DIV标签中的P标签水平和垂直都居中</title> <style type="text/css"> div { width:400px; height:

css如何设置文本在li元素中垂直居中显示

css如何设置文本在li元素中垂直居中显示:本章节介绍一下如何利用css将文本设置为在li元素中垂直居中效果.实现此效果非常的简单,只要利用line-height属性即可.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

CSS实现图片在div a标签中水平垂直居中

CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src="test.jpg" /> </a></div> /*For Firefox Chrome*/.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:cent