HTMl中标签中li横向排列的实现示例
发布时间:2020-02-21 15:58:16 作者:scorpion喵喵 我要评论
这篇文章主要介绍了HTMl中标签中li横向排列的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
大多数的导航栏都是横向排列如下图所示,那么这究竟是怎么实现的呢?其实它主要运用<ul>标签中li的横向排列,下面以一个例子向大家详细讲解具体是如何实现的。
1编写横向菜单的HTML代码架构
1 2 3 4 5 6 | < 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>设置公共样式
1 2 3 4 5 6 7 8 9 10 11 12 | <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>设置链接样式
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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>链接悬停效果
1 2 3 4 5 6 | <style type= "text/css" > #menu li a:hover { background : #146C9C ; /* 变换背景色 */ color : #fff ; /* 变换文字颜色 */ } </style> |
<4>去掉最左边导航栏的右边框
3 完整的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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 > |
在线运行
提示:您可以先修改部分代码再运行
总之,使其横向排列的最需要的是: <ui>标签的主要样式为display:balock;
<li>的主要样式为display:inline-balock,float:left,list-style:none;
到此这篇关于HTMl中标签中li横向排列的实现示例的文章就介绍到这了,更多相关HTMl li横向排列内容请搜素脚本之家以前的文章或下面相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了css实现图片横向排列滚动效果,需要的朋友可以参考下2017-12-07
- div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助2014-02-20
让横向排列的几个浮动(float:left)的子div居中显示
div设置成float之后,在父div中设置text-align:center,就无法使子div居中显示,下面有个不错的解决方法,大家可以参考下2014-02-17- 怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,在此与大家分享下,感兴趣的朋友可以参考下,以备不时之需2013-10-23
最新评论