ceacer 2 已发布 1月27号 分享 已发布 1月27号 HTML ul li 横排居中排列的方法，三步骤及实例 Table of Contents ul li 横排居中排列的方法 无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下： HTML ul li 横排居中排列的方法，三步骤及实例 ul li横排的方法 将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block，个人比较常用的是后者： ul li{display:inline-block;} ul水平居中和垂直居中的方法 水平居中方法：只要将ul元素包含于一个div元素，并将div元素的text-align属性设置为center即可将ul水平居中。除此之外，因为ul的列表默认情况下是有左内边距的，所以，为了能够让列表能够更好地水平居中，需要将ul的左内边距padding-left设置为0，具体可见下方的综合实例。 垂直居中方法：为包含ul元素的div元素设置宽度width和高度height（实际上导航条一般也需要有宽度和高度的设置），然后将ul的line-height属性设置为父元素的高度height即可。 去掉圆点的方法 将ul元素的list-style属性设置为none即可。 HTML ul li 横排居中排列的方法，三步骤及实例 ul li 横排居中排列综合实例代码，及在线编辑器 class='e1'> <ul class='e2'> <li>HTMLli> <li>pythonli> <li>golangli> ul> div> <style> .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;} .e2{list-style:none;padding-left:0%;} .e2 li{line-height:50px;display:inline-block;} style> 实例代码解析 如上代码，一定要将ul的左内边距padding-left设置为0，否则ul列表的“水平居中”将偏向右边，大家可以将.e2中的padding-left删除掉，然后再在线运行看一看效果。 评论链接 在其他网站上分享 更多分享选项...
推荐帖
创建账户或登录以发表评论
您需要成为会员才能发表评论
创建一个帐户
在我们的社区注册一个新账户。很简单！
注册新账户登入
已有账户？在此登录
立即登录