整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML ul li 横排居中排列的方法，三步骤及实例
无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：
HTML ul li 横排居中排列的方法，三步骤及实例
将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block，个人比较常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要将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 横排居中排列的方法，三步骤及实例
<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>HTML ul li 横排居中排列的方法，综合实例在线 - HTML教程
如上代码，一定要将ul的左内边距padding-left设置为0，否则ul列表的“水平居中”将偏向右边，大家可以将.e2中的padding-left删除掉，然后再在线运行看一看效果。
笨鸟工具-璞玉天成，大器晚成
篇文章，小海老师带领大家一同做一个利用CSS技术实现的导航栏。通过这个导航栏的制作，希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识，并能够达到灵活运用的程度。
承接文章：灵活控制块级元素在一行内显示，CSS浮动属性，知道原理就很简单
技术等级：初级 | 适合前端开发的初学者阅读学习。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
如果你是初学前端开发，强烈建议跟着文章中讲的步骤自己做一做。步骤不多，思路简单，占用不了大家太多的时间，自己做一遍，一定会收获不少。
一、导航栏效果图展示：
今天我们要做的导航栏效果如下图所示。
导航栏效果图展示
这个效果主要使用的是<ul></ul>标记对和<a></a>标记对共同实现的。
整个实例涉及到的CSS属性如下所示：
width
height
background-color
list-style-type
display
float
margin
line-height
二、实现页面效果：
首先为导航栏设置一个<div>容器，并设置其id属性的取值设置为nav。该容器用来控制导航栏的通栏位置。通栏的容器宽度应该设置为100%，这里高度设置为40px，颜色为#a72f2e。实现代码如下所示：
<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}
由于要在通栏的容器中显示固定宽度为1000px的导航栏主体，因此在该容器内部再制作一个<div>容器，用来盛放真正的导航栏代码。我们将它的class属性取值为navContent。这个容器的宽度设置为1000px，高度与#nav的高度等高，并且在#nav容器内部水平居中。实现代码如下所示：
<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}
接下来在.navContent容器内部书写导航栏的各个条目。导航栏是使用<ul></ul>标记对实现的，而它的导航栏条目是利用<li></li>标记对书写的。因为导航栏需要单击后跳转页面，所以在<li></li>内部使用了<a></a>标记对。
这里要说明一点，因为<li></li>标记对是块级元素，<a></a>标记对是内联元素，因此要让<li></li>标记对包裹<a></a>标记对，不要用<a></a>标记对包裹<li></li>标记对。
这里以导航栏条目“首页”和“网站介绍”为例，下列HTML代码展示了导航栏的条目内容。
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">网站简介</a></li>
…
</ul>
需要更多的导航栏条目，可以在<ul>标记对内部重复书写<li></li>和<a></a>的代码格式。
三、编写整个导航栏的CSS样式：
整个导航栏是使用<ul></ul>标记对实现的，所以需要对<ul></ul>标记对编写CSS样式。
由于无序列表的列表项左侧带有小圆点的项目符号，因此需要将该项目符号去掉。所以<ul></ul>标记对的CSS代码如下所示：
#nav .navContent ul{
list-style-type:none;
}
四、编写导航栏条目的CSS样式：
导航栏条目是使用<li></li>标记对实现的，所以需要对<li></li>标记对编写CSS样式。
由于<li></li>标记对是块级元素，因此即使去掉了左侧的项目符号，所有的条目依然都各自独占一行显示，所以需要让它们在一行内显示，这就需要让所有的<li></li>标记对左浮动。CSS代码如下所示：
#nav .navContent ul li{
float:left;
}
五、编写导航栏条目中链接的CSS样式：
导航栏条目中的链接是使用<a></a>标记对实现的，所以需要对<a></a>标记对编写CSS样式。
由于<a></a>标记对是内联元素，因此无法设置宽度和高度，也就无法为每一个导航栏条目设置尺寸。因此需要将<a></a>标记对转换为块级元素（display属性），然后设置宽度和高度（width属性和height属性）。
有了宽度和高度，就需要让链接的文本在容器中水平居中（text-align属性）和垂直居中（line-height属性）了。
最后去掉链接的下划线（text-decoration属性），并设置链接的文本颜色（color属性）。
导航栏条目中链接的CSS代码如下所示：
#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}
六、编写鼠标经过导航栏条目时的CSS样式：
鼠标经过导航栏目时，即使没有触碰到链接的文本部分，也应该能够进行跳转。因此需要对<a></a>标记对编写鼠标经过时的CSS样式。
鼠标经过时，希望背景颜色（background-color属性）和文本颜色（color属性）发生变化。
鼠标经过链接时的CSS代码如下所示：
#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}
七、整体代码：
至此，这个简单的导航栏效果就完全实现了，CSS整体使用了约30行代码。实现这个导航栏效果的HTML代码如下图所示。
HTML整体代码
实现这个导航栏效果的CSS代码如下图所示。
CSS整体代码
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
下一次，小海老师开始为大家讲解CSS的盒属性。盒属性是div布局的基础，在实际的布局过程中有许多应用技巧。下一篇文章我会为大家将盒属性一个一个进行详细的分析。
天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：
1.首先我们创建一个有效的列表
<li> <a href="http://www.？？？.com">首页</a> </li>
<li><a href="http://www.？？？.com">关于我们</a> </li>
<li><a href="http://www.？？？.com">产品展示</a> </li>
<li><a href="http://www.？？？.com">产品知识</a> </li>
<li><a href="http://www.？？？.com">新闻动态</a> </li>
<li><a href="http://www.？？？.com" class="last">联系我们</a></li>
去掉默认的项目符号并将外边距和内边距设置为零：
ul.nav{margin:0;
padding:0
list-style-type:none;}
2.接下来我们给导航设置一个浅色的背景和深色的边框，并给它一定的宽度（根据自己的需要）：
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
3.为链接显示文本设置样式，首先设置文本的颜色并关闭下划线，使文本居中对齐，接着为了使每个链接看起来像一个独立的区块需要设置一下边框，让边框顶部的颜色比背景颜色浅一点边框底部颜色比背景颜色深深一点，除此之外还需要把它的display属性设置为block,目的是让其成为块级元素，这样宽度会与列表背景宽度保持一致（下图展示了它们之间区别）
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
4.现在看起来已经有点像一个垂直导航条了，但最后一个链接的底边框与列表的第边框貌似重合了，这里我们可以把最后一个链接的底边框设置成与它的顶边框一致的颜色就可以了。最后我们来完成鼠标悬停时的效果，这是就要用到：hover了，为此只需要修改一下背景和文本颜色就可以了。
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
ul.nav a.last{border-bottom: 1px solid #E4FFD3}
ul.nav a:hover{color:#E4FFD3;
background-color:mediumvioletred;}
*请认真填写需求信息，我们会在24小时内与您取得联系。
