HTMl中标签中li横向排列的实现⽰例
⼤多数的导航栏都是横向排列如下图所⽰，那么这究竟是怎么实现的呢？其实它主要运⽤<ul>标签中li的横向排列，下⾯以⼀个例⼦向⼤家详细讲解具体是如何实现的。
1编写横向菜单的HTML代码架构
<ul id="menu">
<li><a href="www.baidu">Baidu.Com</a></li>
<li><a href="//www.jb51">Jb51</a></li>
<li><a href="www.yahoo">Yahoo.Com</a></li>
<li><a href="le" class="last">Google.Com</a></li>
</ul>
2 编写CSS代码
<1>设置公共样式
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置⽂字⼤⼩和字体样式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float: left; /* 往左浮动 */
display: block;
}
<2>设置链接样式
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置⾼度 */
line-height:30px; /* 设置⾏⾼，将⾏⾼和⾼度设置同⼀个值，可以让单⾏⽂本垂直居中 */
text-align:center; /* 居中对齐⽂字 */
background:#3A4953; /* 设置背景⾊ */
color:#fff; /* 设置⽂字颜⾊ */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
<3>链接悬停效果
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景⾊ */
color:#fff; /* 变换⽂字颜⾊ */
}
</style>
<4>去掉最左边导航栏的右边框
<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>
3 完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图⽚提⽰效果</title>
<script src="../jquery-3.3.1.min.js"></script>
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置⽂字⼤⼩和字体样式 */
width: 100%;
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float: left; /* 往左浮动 */
display: block;
}
#menu li a {
display:inline-block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置⾼度 */
line-height:30px; /* 设置⾏⾼，将⾏⾼和⾼度设置同⼀个值，可以让单⾏⽂本垂直居中 */            text-align:center; /* 居中对齐⽂字 */
background:#3A4953; /* 设置背景⾊ */
color:#fff; /* 设置⽂字颜⾊ */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
#menu li a:hover {
background:#146C9C; /* 变换背景⾊ */
html ul标签color:#fff; /* 变换⽂字颜⾊ */
}
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="www.baidu">Baidu.Com</a></li>
<li><a href="//www.jb51">Jb51</a></li>
<li><a href="www.yahoo">Yahoo.Com</a></li>
<li><a href="le" class="last">Google.Com</a></li>
</ul>
</body>
</html>
在线运⾏
<title>图⽚提⽰效果
</title>
<script src="../jquery-3.3.1.min.js"></script>
<style type="text/css"> #menu {
font:12px verdana, arial, sans-serif; /* 设置⽂字⼤⼩和字体样式 */ width: 100%;
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */ padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float: left; /* 往左浮动 */ display: block；提⽰：您可以先修改部分代码再运⾏
总之，使其横向排列的最需要的是:  <ui>标签的主要样式为display:balock;
<li>的主要样式为display:inline-balock,float：left,list-style:none;
到此这篇关于HTMl中标签中li横向排列的实现⽰例的⽂章就介绍到这了，更多相关HTMl li横向排列内容请搜素以前的⽂章或下⾯相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。