html li内部水平排列,怎样使用li进行水平排列-程序员宅基地

技术标签: html li内部水平排列  

这次给大家带来怎样使用li进行水平排列,使用li进行水平排列的注意事项有哪些,下面就是实战案例,一起来看一下。

li水平排列

html{

font-size: 20px;

}

@media only screen and (min-width: 320px){

html{font-size: 20px !important;}

}

@media only screen and (min-width: 350px){

html{font-size: 22.5px !important;}

}

@media only screen and (min-width: 365px){

html{font-size: 23px !important;}

}

@media only screen and (min-width: 375px){

html{font-size: 23.5px !important;}

}

@media only screen and (min-width: 390px){

html{font-size: 24.5px !important;}

}

@media only screen and (min-width: 400px){

html{font-size: 25px !important;}

}

@media only screen and (min-width: 428px){

html{font-size: 26.8px !important;}

}

@media only screen and (min-width: 432px){

html{font-size: 27.4px !important;}

}

@media only screen and (min-width: 481px){

html{font-size: 30px !important;}

}

@media only screen and (min-width: 569px){

html{font-size: 35px !important;}

}

@media only screen and (min-width: 569px){

html{font-size: 40px !important;}

}

body{

margin: 0;

padding: 0;

}

ul{

width: 100%;

margin: 0.3rem 0;

padding:0.3rem 0;

border-top:0.05rem solid #ccc;

border-bottom: 0.05rem solid #ccc;

}

li{

width: 33%;

list-style-type: none;

display:inline-block;

font-size: 0.8rem;

border-left: 0.05rem solid #ccc;

text-align: center;

}

  • 我是第一个li
  • 我是第二个li
  • 我是第三个li

d73c35cbeefaa2765bc4674e9e33d4a9.png

a_34767

这样会有一个问题给li的宽度设置为33%,三个li标签的宽度居然超过了一行,有一点很明显就是li标签直接多了一点空白。

一、浮动

首先想到的是浮动,给li增加样式float:left。

19672e9544cdb1cfd0862309419cf663.png

a_34767

效果如上,这样的方式,浮动会有一个问题,就是li的浮动使得ul的高度为0,解决这问题,有三种方法:

1、给ul增加height高度,但是这样不能做到自适应。

2、清楚浮动的影响,在最后的li标签后面增加一个空的p,

(个人推荐,但是觉得代码维护上也不是很好。)

3、对ul增加zoom属性,貌似只适应与ie(我没研究)。

dff3e919b9d286a2db5d6fe2392322fa.png

a_34767

二、将li标签写成一行

  • 我是第一个li
  • 我是第二个li
  • 我是第三个li

很奇怪为什么这样就正常了,暂时很难理解。

6a074c8e8c40f20365d4c4def472273c.png

a_34767

三、给ul增加样式去掉li标签之间空白

给ul增加font-size:0样式可以去除li标签之间的空白。这样有点需要注意的就是需要重新设置li标签的字体大小。

a_34767

b6d8d310c4cdbd064eaccced2a285717.png

相信看了本文案例你已经掌握了方法,更多精彩请关注jquery中文网其它相关文章!

推荐阅读:

怎样使用javascript Date Format方法

如何使用Zepto tap事件的穿透与点透(附代码)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39882589/article/details/117876155

智能推荐

未处理System.BadImageFormatException”类型的未经处理的异常在 xxxxxxx.exe 中发生_“system.badimageformatexception”类型的未经处理的异常在 未知模块。 -程序员宅基地

文章浏览阅读2.4k次。“System.BadImageFormatException”类型的未经处理的异常在 xxxx.exe 中发生其他信息: 未能加载文件或程序集“xxxxxxx, Version=xxxxxx,xxxxxxx”或它的某一个依赖项。试图加载格式不正确的程序。此原因是由于 ” 目标程序的目标平台与 依赖项的目标编译平台不一致导致,把所有的项目都修改到同一目标平台下(X86、X64或AnyCPU)进行编译,一般即可解决问题“。若果以上方式不能解决,可采用如下方式:右键选择配置管理器,在这里修改平台。_“system.badimageformatexception”类型的未经处理的异常在 未知模块。 中发生

PC移植安卓---2018/04/26_电脑软件移植安卓-程序员宅基地

文章浏览阅读2.4k次。记录一下碰到的问题:1.Assetbundle加载问题: 原PC打包后的AssetBundle导入安卓工程后,加载会出问题。同时工程打包APK时,StreamingAssets中不能有中文。解决方案: (1).加入PinYinConvert类,用于将中文转换为拼音(多音字可能会出错,例如空调转换为KongDiao||阿拉伯数字不支持,如Ⅰ、Ⅱ、Ⅲ、Ⅳ(IIII)、Ⅴ、Ⅵ、Ⅶ、Ⅷ、Ⅸ、Ⅹ..._电脑软件移植安卓

学习笔记(03):高并发下的Nginx性能优化实战-Nginx优势特点总结-程序员宅基地

文章浏览阅读87次。 高并发下的Nginx性能优化实战、解读Nginx的核心知识、掌握nginx核心原理?通过本期课程将解答我们的疑惑。_随着 nginx 发展,高并发、轻量的优势,近几年

Linux环境 docker启动redis命令_linux docker 重启 redis-程序员宅基地

文章浏览阅读1.1k次。docker启动redis命令_linux docker 重启 redis

【总结】插头DP-bzoj1210/2310/2331/2595_dp插头模型-程序员宅基地

文章浏览阅读325次。插头DP小结_dp插头模型

关于测试工作效率低的一些思考和改进方法_测试人员不足与改进-程序员宅基地

文章浏览阅读3.5k次。关于测试工作效率低的一些思考和改进方法引子  汇总统计了一下项目组近期测试项目实际工作量与基线工作量的对比,发现一个严重问题。就是工作效率特别低下。下面简单列举一下几个项目预期工作量和实际工作量以及时间耗费严重的地方、项目简要背景。  1、B版本测试。版本预期工作量15人天,实际耗费工作量在30人天。更为严重的是测试人员并没有因为测试周期延长和工作量投入加大而测试的更轻松,反而是测试期..._测试人员不足与改进

随便推点

有了这6款浏览器插件,浏览器居然“活了”?!媳妇儿直呼“大开眼界”_浏览器插件助手-程序员宅基地

文章浏览阅读901次,点赞20次,收藏23次。浏览器是每台电脑的必装软件,去浏览器搜索资源和信息已经成为我们的日常,我媳妇儿原本也以为浏览器就是上网冲浪而已,哪有那么强大,但经过我的演示之后她惊呆了,直接给我竖起大拇指道:“原来浏览器还能这么用?大开眼界!今天来给大家介绍几款实用的浏览器插件,学会之后让你的浏览器“活过来”!_浏览器插件助手

NumPy科学数学库_数学中常用的环境有numpy-程序员宅基地

文章浏览阅读101次。NumPy是Python中最常用的科学数学计算库之一,它提供了高效的多维数组对象以及对这些数组进行操作的函数NumPy的核心是ndarray(N-dimensional array)对象,它是一个用于存储同类型数据的多维数组Numpy通常与SciPy(Scientific Python)和 Matplotlib(绘图库)一起使用,用于替代MatLabSciPy是一个开源的Python算法库和数学工具包;Matplotlib是Python语言及其Numpy的可视化操作界面'''_数学中常用的环境有numpy

dind(docker in docker)学习-程序员宅基地

文章浏览阅读1.1w次。docker in docker说白了,就是在docker容器内启动一个docker daemon,对外提供服务。优点在于:镜像和容器都在一个隔离的环境,保持操作者的干净环境。想到了再补充 :)一:低版本启动及访问启动1.12.6-dinddocker run --privileged -d --name mydocker docker:1.12.6-dind在其他容器访问d..._dind

com.sun.org.apache.xerces.internal.dom.DeferredTextImpl cannot be cast to org.w3c.dom.Element-程序员宅基地

文章浏览阅读1.4k次。代码 List<book> list = new ArrayList<book>(); Document doc = new DOCUntil().getDocument("src/ww/t/qp/books.xml"); Element root = doc.getDocumentElement(); NodeList books = root.getElementsByTagName("book"); for _com.sun.org.apache.xerces.internal.dom.deferredtextimpl cannot be cast to or

计算机网络 (ISP、计算机网络体系结构 拓扑图)-程序员宅基地

文章浏览阅读2.9k次。计算机网络定义: 一些互相连接的,自治的计算机或者智能硬件设备集合信息是如何交换的?1、电路交换(电话)线路被某个终端占用后不会被释放 除非主动释放2、分组交换分组交换是 把大数据拆分成小数据进行分组传输 提高传输效率计算机上的数据是突发的,所以不采用电路交换,而采用分组交换3、ISP(internet service provider)网络服务提供商终端通过交换机连接一级ISP(国际性区域)之间互相连接 某一条线路断后可以通过其他设备进行通信二级ISP(国家/区域性规模)与一级相互连接三级ISP(本地区域

推荐文章

热门文章

相关标签