此时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>

程序运行结果:

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

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

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

    我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...

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

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...

  3. 清除ul li里面的浮动并让ul自适应高度的一个好办法

    有时候会遇到ul li列表里面的东西会用到浮动,这个时候ul的高度就不会被撑开,这怎么办呢? 1)最笨的方法就是设置ul的高度,但这种方法很死板,高度不能自适应 2)有次我试着在ul里面加一个清除浮动 ...

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

    使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...

  5. CSS学习笔记(5)--导航ul,li浮动问题

    为什么只给li设置浮动,没有给ul设置浮动,ul后的元素div也会跟着浮动?   添加评论 分享   默认排序按时间排序 3 个回答   张思远 程序员 2 人赞同 代码是不是这样的啊?<ul& ...

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

    这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...

  7. jquery获取ul下的所有li个数

    通过jquery获取ul下所有li的个数(eg) $("ul li").length 通过jquery设置标签css的样式(eg)$("#div").css({ ...

  8. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

  9. 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制

    1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...

随机推荐

  1. 51NOD 1424 零树

    Discription 有一棵以1为根的树,他有n个结点,用1到n编号.第i号点有一个值vi. 现在可以对树进行如下操作: 步骤1:在树中选一个连通块,这个连通块必须包含1这个结点. 步骤2:然后对这 ...

  2. SpringBoot中mybatis的自动生成

    1.在pom文件中加入自动生成的插件 <!-- mybatis generator 自动生成代码插件 --> <plugin> <groupId>org.mybat ...

  3. Hadoop 连接mysql

    1 mysql数据导入到hdfs数据 hadoop提供了org.apache.hadoop.io.Writable接口来实现简单的高效的可序列化的协议,该类基于DataInput和DataOutput ...

  4. getpixel 取色

    HWND hwnd = ::FindWindow(NULL,"<天龙八部OL>"); CRect rect; CString strTmp; if (hwnd != N ...

  5. Android判断屏幕锁屏的方法总结

    由于做一个项目,需要判断屏幕是否锁屏,发现网上方法很多,但是比较杂,现在进行总结一下: 总共有两类方法: 一.代码直接判定 二.接收广播 现在先说第一类方法(代码直接判定): 1.通过PowerMan ...

  6. 手游产品经理初探(八)CasinoStar玩家离开原因分析

    通过Delta DNA分析报告.综合我们的游戏进行思考,我总结了几条玩家流失的经验: 1.在有限的前60秒我们没有花足够的精力去吸引玩家.就是说我们要花大量的经历在玩家进入游戏的60秒的体验上(我的澳 ...

  7. win32收不到F10按键消息解决的方法

    在WM_KEYDOWN中处理F10(VK_F10)消息总是获取不到,后来用spy++监听窗体消息发现按下F10并没有WM_KEYDOWN消息产生,而是产生了WM_SYSKEYDOWN

  8. [原创] 在线音乐API的研究 (Part 2.1)

    最近,在优化一个自己写的音乐播放器.主要目的是回顾.归纳,并希望能够写出一个属于自己的common lib.今天,主要是关于在线音乐API的一些分析结果.此次,主要分析的是歌词.专辑部分.在线搜索音乐 ...

  9. LA4043 - Ants(二分图完备最佳匹配KM)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=2044">https://icpcarch ...

  10. bash shell最基本的语法

    1 shell语句的基本构成 shell每个基本的构成元素之间都相隔一个空格. 比如[ -e file ],[.-e.file.]这四个基本元素之间都相隔了一个空格. 同样的道理[ ! -e file ...