html li内部水平排列,怎样使用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
这样会有一个问题给li的宽度设置为33%,三个li标签的宽度居然超过了一行,有一点很明显就是li标签直接多了一点空白。
一、浮动
首先想到的是浮动,给li增加样式float:left。
效果如上,这样的方式,浮动会有一个问题,就是li的浮动使得ul的高度为0,解决这问题,有三种方法:
1、给ul增加height高度,但是这样不能做到自适应。
2、清楚浮动的影响,在最后的li标签后面增加一个空的p,
(个人推荐,但是觉得代码维护上也不是很好。)
3、对ul增加zoom属性,貌似只适应与ie(我没研究)。
二、将li标签写成一行
- 我是第一个li
- 我是第二个li
- 我是第三个li
很奇怪为什么这样就正常了,暂时很难理解。
三、给ul增加样式去掉li标签之间空白
给ul增加font-size:0样式可以去除li标签之间的空白。这样有点需要注意的就是需要重新设置li标签的字体大小。
相信看了本文案例你已经掌握了方法,更多精彩请关注jquery中文网其它相关文章!
推荐阅读:
怎样使用javascript Date Format方法
如何使用Zepto tap事件的穿透与点透(附代码)
html li内部水平排列,怎样使用li进行水平排列相关推荐
- ul li列表样式css,列表ul li 专用样式
列表ul li 专用样式 DATE: 2016-11-10 / VIEWS: 1142 主页级别的页面大部分的内容都是做在无序列表里面的,其庞大的使用规模,需要有完备的样式支持. ul{zoom:1} ...
- html li圆点单独颜色,html中li标签可以设置颜色吗
在HTML中如果在ul>li中添加子标签>a链接,修改li中或者是有什么方法可以让修改li的字体颜色时,a标签的字体颜色也改变, --由于CSS的层叠(cascading),a元素继承自l ...
- R语言可视化分面图、单变量分组多水平t检验并指定参考水平、可视化单变量分组多水平分面箱图(faceting boxplot)并添加显著性水平、指定显著性参考水平、添加抖动数据点
R语言可视化分面图.单变量分组多水平t检验并指定参考水平.可视化单变量分组多水平分面箱图(faceting boxplot)并添加显著性水平.指定显著性参考水平.添加抖动数据点 目录
- R语言可视化分面图、假设检验、单变量分组多水平t检验并指定参考水平、可视化单变量分组多水平分面箱图(faceting boxplot)并添加显著性水平、指定显著性参考水平
R语言可视化分面图.假设检验.单变量分组多水平t检验并指定参考水平.可视化单变量分组多水平分面箱图(faceting boxplot)并添加显著性水平.指定显著性参考水平 目录
- 排列组合思维导图_排列组合——排列数专题
在上篇关于排列组合主要考点的介绍中,正男老师提到:排列组合考点通常可以拆分为排列数考点和组合数考点.排列数考点相关试题可以细分为2类,分别为:穷举问题和限制条件问题.本期正男老师就从近六年内的5道涉及 ...
- 数组的合并和升序排列_leetcode No.31 下一个排列
题目链接: 下一个排列 - 力扣(LeetCode)leetcode-cn.com 题目描述: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个 ...
- win7中能对窗口的排列方法是_win7系统窗口排列方式怎么修改?修改窗口排列方式方法...
一般情况下,win7系统自动排列窗口的排列方式可分为层叠.纵向堆叠和并排,我们也可以自定义修改窗口排列方式,让窗口按照设置的进行排列.那么win7系统窗口排列方式怎么修改?其实修改方法很简单,接下去教 ...
- 变成一列_VBA实践(6)--excel横向排列的数据表变成竖向排列
横向排列的数据表变成竖向排列 一个由某程序导出的excel文档的数据表排列是从左到右的横向排列.数据表在同一个sheet中,一个完整的数据表占23行11列,数据表间间隔一列.数据表很多. https: ...
- Latex如何插入多个图片,实现并排排列或者多行多列排列
Latex如何插入多个图片,实现并排排列或者多行多列排列 原创不易,路过的各位大佬请点个赞 以IEEE双栏论文模板为例 以下图片的插入方式都是以IEEE双栏模板为例,图片都在单栏上. 如果使图片横穿两 ...
最新文章
- 网站服务器的ip地址会变吗,网站的服务器变了 IP地址变吗
- BZOJ1444: [Jsoi2009]有趣的游戏(Trie图,矩乘)
- 轨迹规划概念总结——Dubins曲线
- mac photoshop install无法安装_MAC安装应用报错:无法打开或文件损坏的处理方法~...
- 【DP】Mobile Service(jzoj 1327)
- 为何boss上的HR要了简历就不回复了?
- IT人不要一直做技术(转载)
- vue项目云服务器,vue项目云服务器
- js open 和close 方法
- nginx支持php5,配置nginx支持php
- 安装Windowsxp虚拟机
- html 倒计时 插件,jQuery倒计时插件leftTime.js
- RISC_V芯片架构
- 1、spring之Resource加载
- plsql删除历史记录
- Linux 系统时间 EST 改 CTS
- C语言中函数参数传递的方式:值传递,地址传递
- excel提示“文件已损坏,无法打开”解决方法
- VMware--局域网访问电脑中VMware虚拟机
- linux以root账号登陆gnome,CentOS 7 - 以root身份登入Gnome