HTMl中标识中li横向排序的完成示例

  大多数数的导航栏栏全是横向排序以下图所示，那末这到底是如何完成的呢？实际上它关键应用<ul>标识中li的横向排序，下面以1个事例向大伙儿详尽解读实际是怎样完成的。

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; /* 设定行高，将行高和高宽比设定同1个值，可让单写作本竖直垂直居中 */
        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⑻">
	<title>照片提醒实际效果</title>
	<script src="../jquery⑶.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; /* 设定行高，将行高和高宽比设定同1个值，可让单写作本竖直垂直居中 */
            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>

线上运作


提醒：您能够先改动一部分编码再运作

总而言之，使其横向排序的最必须的是:   <ui>标识的关键款式为display:balock;

   <li>的关键款式为display:inline-balock,float：left,list-style:none;

到此这篇有关HTMl中标识中li横向排序的完成示例的文章内容就详细介绍到这了,更多有关HTMl li横向排序內容请搜素脚本制作之家之前的文章内容或下面有关文章内容，期待大伙儿之后多多适用脚本制作之家！