ul下的li浮动,如何是ul有li的高度

此时ul展示的界面为:

①给ul加上一个样式,display:inline-block;

<html>
<head>
<title>float</title>
<style>
    ul{
        display: inline-block;
        border:1px solid #000;
    }
    ul li{
        border:1px solid #f00;
        float:left;
    }
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
</html>

程序截图:

②给ul加上样式,float:left

<html>
<head>
<title>float</title>
<style>
    ul{
        float: left;
        border:1px solid #000;
    }
    ul li{
        border:1px solid #f00;
        float:left;
    }
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
</html>

程序运行结果:

③给ul加上样式,overflow:hidden;

<html>
<head>
<title>float</title>
<style>
    ul{
        overflow: hidden;
        border:1px solid #000;
    }
    ul li{
        border:1px solid #f00;
        float:left;
    }
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
</html>

程序运行结果:

  暂时先把解决办法贴出来,待我后面好好研究过再来仔细分析一下。

时间: 2024-10-12 20:16:34

ul下的li浮动,如何是ul有li的高度的相关文章

IE6/7中li浮动外边距无法撑开ul的解决方法

昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&

li浮动引起ul高度坍陷的解决方法

我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就是li向左浮动后,ul高度坍陷,所以border就显示为一条线.代码.效果如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

关于ul里边的li浮动后边的p不独占一行问题

为什么ul里面的li元素浮动起来以后本应该独占一行的P标签会跟着上去贴着li元素的内容呢? 引入的一个CSS里面把除非设置Ul的行高,这样P标签才会下拉,这是为什么? 下图是出来的没加css效果 刚开始我也是烦,但是后来看了一下资料知道是怎么回事了.这是因为浮动使得li脱离正常的文档流,li的父元素ul的高度变为0,这时,与ul相邻的p元素的位置就上去了.又因为浮动会对邻近的内容进行缩进,所以p元素里面的文字会贴着li,如果p元素里的文字足够多,你会看到p元素里的文字是环绕li的,这就是浮动最本

遍历ul下的li,点击弹出li的索引

首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的

将一个ul下的li转移到另外一个ul里面 【appendTo】

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>将一个ul下的li转移到另外一个ul里面</title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <script type=&

jquery选择div下的ul下的li下的a

使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").children("ul:first").children("li:first").find("a");//div下的第一个ul下的第一个li下的a标签 //可以用下标 $("div#div的id").children("u

JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容

这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li"); for(var i = 0; i<itemli.length; i++){ itemli[i].index = i; //给每个li定义一个属性索引值 itemli[i].onclick = function(){ alert(this.index+this.innerHTML); } } 方

利用js输出ul下li的index索引值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打印索引</title> </head> <style type="text/css"> li{background: pink;margin-bottom: 10px;height: 40px;} </style> <body>

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

今天遇到的问题真的让人不得不吐槽,因为一个很小的问题,花费了半天的时间来才解决这个问题.一直认为自己对Html与Css了解应该算蛮不错的,但是今天遇到的事情让我不得不反省自己的学习心态上的错误.Html与Css的问题都是大问题,因为一旦出现布局的出错,往往不是自己的代码有问题,而是自己对某个浏览器的概念不了解产生的错误.这点告诉我们,要不断地去实践,去遇到问题,才能让我们对浏览器的很多原理理解更加深刻.不要以为自己学的差不多了,其实你恰好处于没有入门的地步.所以一定要永远保持谦虚的心态去学习,你