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>
程序运行结果:
暂时先把解决办法贴出来,待我后面好好研究过再来仔细分析一下。
ul下的li浮动,如何是ul有li的高度的更多相关文章
- li浮动引起ul高度坍陷的解决方法
我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...
- 遍历ul下的li,点击弹出li的索引
首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...
- 清除ul li里面的浮动并让ul自适应高度的一个好办法
有时候会遇到ul li列表里面的东西会用到浮动,这个时候ul的高度就不会被撑开,这怎么办呢? 1)最笨的方法就是设置ul的高度,但这种方法很死板,高度不能自适应 2)有次我试着在ul里面加一个清除浮动 ...
- jquery选择div下的ul下的li下的a
使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...
- CSS学习笔记(5)--导航ul,li浮动问题
为什么只给li设置浮动,没有给ul设置浮动,ul后的元素div也会跟着浮动? 添加评论 分享 默认排序按时间排序 3 个回答 张思远 程序员 2 人赞同 代码是不是这样的啊?<ul& ...
- JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容
这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...
- jquery获取ul下的所有li个数
通过jquery获取ul下所有li的个数(eg) $("ul li").length 通过jquery设置标签css的样式(eg)$("#div").css({ ...
- 对Ul下的li标签执行点击事件——如何获取你所点击的标签
问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...
- 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制
1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...
随机推荐
- android EditText禁止复制粘贴完整代码
<!-- 定义基础布局LinearLayout --> <LinearLayout xmlns:android="http://schemas.android.com/ap ...
- 根据wsdl反向生成webservice服务端(3种方法)
前言 正常情况下,都是我们项目组创建一个webservice服务端,客户通过我们提供的wsdl地址生成客户端并进行访问:但是最近和一个国企做接口对接,他们却只提供给我们wsdl,需要我们根据wsdl生 ...
- SolidEdge 装配体中如何快速的搞定一个面上所有螺丝 如何在装配体上进行阵列
1 点击"规则排列" 选择要排列的螺丝 2 选择被规则排列的架子 3 选择所有的圆孔(鼠标滑到任意圆孔位置,左键单击即可选中所有圆孔) 4 选择参考的基准孔(已经上了螺 ...
- 百度云分享文件自己设置password
我们在用百度云分享的时候都是百度云随机给我们生成的password.我们能够通过以下的一条js脚本代码来自己定义百度云分享password javascript:require(["func ...
- 使用FMDB多线程訪问数据库,及database is locked的问题
今天最终攻克了多线程同一时候訪问数据库时,报数据库锁定的问题.错误信息是: Unknown error finalizing or resetting statement (5: database i ...
- webpack打包报错Unexpected token
最近项目要上线,需要对项目进行打包部署到服务器上面,在打包过程中npm run build后出现以下报错Unexpected token: punc (() [./~/_element-ui@1.4. ...
- 文件宝局域网传输/播放功能使用帮助(Windows电脑用户)
使用局域网账户密码登录,可以访问电脑上所有文件 使用游客无账户密码登录,只能访问电脑上指定共享文件夹的文件. 1.怎么设置共享文件夹请参考: 方法1 1.在文件资源管理器中选择自己一个想共享的文件夹, ...
- Mac使用小结
1.修改pip的镜像地址及更新pip https://www.cnblogs.com/techroad4ca/p/5922389.html 2.更新python的库,比如更新six sudo pip ...
- 【bzoj4554】[Tjoi2016&Heoi2016]游戏
现在问题有硬石头和软石头的限制 所以要对地图进行预处理 分行做,把有#隔开的*(x)形成联通块的存储下来. 分列作,把有#隔开的*(x)形成联通块的存储下来. 求出所有的行联通个数和列联通个数 作为二 ...
- debian apt-get工作的原理
1 apt-get update apt-get update并没有将远程仓库的包都下载到本地,而是通过访问远程仓库创建或者更新了远程仓库的本地索引,索引文件放在/var/lib/apt/lists目 ...