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中文网其它相关文章！

智能推荐

Python 基于 OpenCV 视觉图像处理实战之 OpenCV 简单人脸检测/识别实战案例之七简单进行人脸检测并添加面具特效实现

Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越多被用于独立的、大型项目的开发。Python是一种解释型脚本语言，可以应用于以下领域： Web 和 Internet开发、科学计算和统计、人工智能、教育、桌面界面开发、软件开发、后端开发、网络爬虫。这里使用 Python 基于 OpenCV 进行视觉图像处理，......

使用UmcFramework和unimrcpclient.xml连接多个SIP设置的配置指南及C代码示例

在多媒体通信领域，MRCP（Media Resource Control Protocol）协议被广泛用于控制语音识别和合成等媒体资源。UniMRCP是一个开源的MRCP实现，提供了客户端和服务端的库。UmcFramework是一个基于UniMRCP客户端库的示例应用程序框架，它帮助开发者快速集成和测试MRCP客户端功能。本文将详细介绍如何使用UmcFramework和unimrcpclient.xml配置文件连接到多个SIP设置，以及如何用C代码进行示例说明。

java.net.ProtocolException: Server redirected too many times (20)-程序员宅基地

文章浏览阅读3k次。报错：java.net.ProtocolException: Server redirected too many times (20)1.没有检查到cookie，一直循环重定向。解决：CookieHandler.setDefault(new CookieManager(null, CookiePolicy.ACCEPT_ALL));URL url = new URL(url); ..._java.net.protocolexception: server redirected too many times (20)

springboot启动报错 Failed to scan *****/derbyLocale_ja_JP.jar from classloader hierarchy_failed to scan from classloader hierarchy-程序员宅基地

文章浏览阅读4.1k次。问题这是部分报错信息2019-07-11 14:03:34.283 WARN [restartedMain][DirectJDKLog.java:175] - Failed to scan [file:/D:/repo/org/apache/derby/derby/10.14.2.0/derbyLocale_ja_JP.jar] from classloader hierarchyjava...._failed to scan from classloader hierarchy

MATLAB-ones函数_matlab中ones函数-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏7次。在MATLAB中，ones函数用于创建一个指定大小的由1组成的矩阵或数组。_matlab中ones函数

解决PS等软件出现应用程序无法正常启动(0xc000007b)_photoshop应用程序无法正常启动0xc000007b。请单击“确认”关闭应用程序。-程序员宅基地

文章浏览阅读3.9w次，点赞2次，收藏9次。　　在使用电脑办公过程中，安装应用程序时难免遇到无法安装或者无法正常启动的问题，这对我们使用电脑带来了诸多不便。那遇到应用程序无法正常启动的问题要如何解决呢?相信大家肯定都是十分疑问的，每次都是只能忍痛重新安装软件。今天，小编就和大家探讨下应用程序无法正常启动的解决方法，帮助大家排忧解难。0xc000007b电脑图解1　　第一种方案：SFC检查系统完整性来尝试修复丢失文件　　1、打开电脑搜索输入cmd.exe，选择以管理员身份运行，跳出提示框时选择继续。0xc000007b电脑图解2_photoshop应用程序无法正常启动0xc000007b。请单击“确认”关闭应用程序。