HTML中的li标签横向排列效果怎么实现-群英

上一篇：HTML中表格比较宽溢出的情况如何解决下一篇：HTML页面插入SVG有什么方式，读取SVG怎么做

这篇文章主要讲解了“HTML中的li标签横向排列效果怎么实现”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

大多数的导航栏都是横向排列如下图所示，那么这究竟是怎么实现的呢？其实它主要运用<ul>标签中li的横向排列，下面以一个例子向大家详细讲解具体是如何实现的。

1编写横向菜单的HTML代码架构

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="//www.jb51.net">Jb51.net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" 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; /* 变换背景色 */
            color:#fff; /* 变换文字颜色 */
        }
        #menu li a.last {
            border-right:0; /* 去掉左侧边框 */
        }
</style>
 
</head>
<body>
    <ul id="menu">
        <li><a href="http://www.baidu.com">Baidu.Com</a></li>
         <li><a href="//www.jb51.net">Jb51.net</a></li>
         <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
         <li><a href="http://www.google.com" class="last">Google.Com</a></li>
    </ul>
</body>
</html>

在线运行

<!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; /* 变换背景色 */ color:#fff; /* 变换文字颜色 */ } #menu li a.last { border-right:0; /* 去掉左侧边框 */ } </style> </head> <body> <p>脚本之家</p> <ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> <li><a href="//www.jb51.net">Jb51.net</a></li> <li><a href="http://www.yahoo.com">Yahoo.Com</a></li> <li><a href="http://www.google.com" class="last">Google.Com</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

总之，使其横向排列的最需要的是: <ui>标签的主要样式为display:balock;

<li>的主要样式为display:inline-balock,float：left,list-style:none;！

关于“HTML中的li标签横向排列效果怎么实现”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。