HTMl中标签中li横向排列的实现示例

建站知识 2021-07-02 22:42www.168986.cn长沙网站建设

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

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

<ul id="menu">
 <li><a href="http://.baidu.">Baidu.Com</a></li>
 <li><a href="//.jb51.">Jb51.</a></li>
 <li><a href="http://.yahoo.">Yahoo.Com</a></li>
 <li><a href="http://.google." 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://.baidu.">Baidu.Com</a></li>
         <li><a href="//.jb51.">Jb51.</a></li>
         <li><a href="http://.yahoo.">Yahoo.Com</a></li>
         <li><a href="http://.google." 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>狼蚁SEO</p>
<ul id="menu">
<li><a href="http://.baidu.">Baidu.Com</a></li>
<li><a href="//.jb51.">Jb51.</a></li>
<li><a href="http://.yahoo.">Yahoo.Com</a></li>
<li><a href="http://.google." class="last">Google.Com</a></li>
</ul>
</body>
</html>

提示您可以先修改部分代码再运行

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

<li>的主要样式为display:inline-balock,floatleft,list-style:none;

到此这篇关于HTMl中标签中li横向排列的实现示例的文章就介绍到这了,更多相关HTMl li横向排列内容请搜素狼蚁SEO以前的文章或狼蚁网站SEO优化相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：解决vscode 中保存后html自动格式化的问题下一篇：html 表格比较宽溢出的解决方法

HTMl中标签中li横向排列的实现示例

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

HTMl中标签中li横向排列的实现示例

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设