HTML ul li 横排居中排列的方法,三步骤及实例

HTML ul li 横排居中排列的方法,三步骤及实例无序列表的列表项默认情况下是竖着排的,因为li元素是块级元素,会自动分行。ul li 横排居中排列综合实例代码,及在线编辑器。

欢迎大家来到IT世界,在知识的湖畔探索吧!

HTML ul li 横排居中排列的方法,三步骤及实例

HTML ul li 横排居中排列的方法,三步骤及实例

ul li 横排居中排列的方法

无序列表的列表项默认情况下是竖着排的,因为li元素是块级元素,会自动分行。那如果要将列表的列表项进行横排,比用无序列表ul元素定义一个导航条。那该怎么办呢?这当中有三个应当被解决的东西,一个是横排本身,另一个就是应当把无序列表项的圆点去掉,第三则是让ul定义的列表居中显示,包括水平居中和垂直居中。方法如下:

HTML ul li 横排居中排列的方法,三步骤及实例

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 横排居中排列的方法,三步骤及实例

HTML ul li 横排居中排列的方法,三步骤及实例

ul li 横排居中排列综合实例代码,及在线编辑器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

HTML+CSS+JS实例在线编辑器:

HTML ul li 横排居中排列的方法,综合实例在线 – HTML教程

实例代码解析

如上代码,一定要将ul的左内边距padding-left设置为0,否则ul列表的“水平居中”将偏向右边,大家可以将.e2中的padding-left删除掉,然后再在线运行看一看效果。

python全栈:

笨鸟工具-璞玉天成,大器晚成

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/34501.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信