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

a_34767

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

一、浮动

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

a_34767

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

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

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

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

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

a_34767

二、将li标签写成一行

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

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

a_34767

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

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

a_34767

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

智能推荐

一个ngrok如何穿透多个端口？_ngrok多个端口-程序员宅基地

文章浏览阅读2.7k次，点赞2次，收藏4次。如何不充钱就可以穿透多个端口？./ngrok authtoken 授权码之前这个操作的生成的yml文件中修改端口可添加多个addr：port端口可随意配置_ngrok多个端口

C语言 char转uint8_t-程序员宅基地

文章浏览阅读5.9k次。char转uint8_t：static int char2uint(char *input, uint8_t *output){ for(int i = 0; i < 24; i++) { output[i] &= 0x00; for (int j = 1; j >= 0; j--) { char hb = input[i*2 + 1 - j]; if (hb >= '0' &..._char转uint8_t

android 陀螺仪简单使用，判读手机是否静止状态_安卓陀螺仪多少才算静止-程序员宅基地

文章浏览阅读6.5k次，点赞5次，收藏13次。陀螺仪允许您在任何给定时刻确定Android设备的角速度。简单来说，它告诉您设备绕X，Y和Z轴旋转的速度有多快。最近，即使是预算手机正在制造，陀螺仪内置，增强现实和虚拟现实应用程序变得如此受欢迎。通过使用陀螺仪，您可以开发可以响应设备方向的微小更改的应用程序。创建陀螺仪对象和管理器manager// Register it, specifying the polling interv..._安卓陀螺仪多少才算静止

lib静态库逆向分析_libtersafe-程序员宅基地

文章浏览阅读4.7k次，点赞3次，收藏16次。当我们要分析一个lib库里的代码时，首先需要判断这是一个静态库还是一个导入库。库类型判断lib文件其实是一个压缩文件。我们可以直接使用7z打开lib文件，以查看里面的内容。如果里面的内容是obj文件，表明是静态库。如果里面的内容是dll文件，表明是导入库。导入库里面是不包含代码的，代码包含在对应的dll文件中。从lib中提取obj静态库是一个或者多个obj文件的打包，这里有两个方法从中提取obj：Microsoft 库管理器 7z解压Microsoft 库管理器(li_libtersafe

Linux的网络适配器_linux 查询网络适配器-程序员宅基地

文章浏览阅读5.3k次，点赞3次，收藏3次。了解一下，省的脑壳痛桥接模式对应的虚拟网络名称“VMnet0” 桥接模式下，虚拟机通过主机的网卡进行通信，若物理主机有多块网卡（有线的和无线网卡），应选择桥结哪块物理网卡桥接模式下，虚拟机和物理主机同等地位，可以通过物理主机的网卡访问外网（局域网），一个局域网的其他计算机可以访问虚拟机。为虚拟机设置一个与物理网卡在同个网段的IP，则虚拟机就可以与物理主机以及局域..._linux 查询网络适配器

【1+X Web前端等级考证】 | Web前端开发中级理论 (附答案)_1+xweb前端开发中级-程序员宅基地

文章浏览阅读3.4w次，点赞77次，收藏438次。# 前言2020 12月 1+X Web 前端开发中级模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？这个证书含金量高不高？# 关于考不考因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除._1+xweb前端开发中级