HTMl中标签中li横向分列的实现示例
|
大大都的导航栏都是横向分列如下图所示，那么这毕竟是怎么实现的呢？着实它首要运用<ul>标签中li的横向分列，下面以一个例子向各人具体讲授详细是怎样实现的。 1编写横向菜单的HTML代码架构 <ul id="menu"> <li><a href=http://www.jb51.net/web/"http:/www.baidu.com">Baidu.Com</a></li> <li><a href=http://www.jb51.net/web/"/www.jb51.net">Jb51.net</a></li> <li><a href=http://www.jb51.net/web/"http:/www.yahoo.com">Yahoo.Com</a></li> <li><a href=http://www.jb51.net/web/"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=http://www.jb51.net/web/"../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.jb51.net/web/"http:/www.baidu.com">Baidu.Com</a></li> <li><a href=http://www.jb51.net/web/"/www.jb51.net">Jb51.net</a></li> <li><a href=http://www.jb51.net/web/"http:/www.yahoo.com">Yahoo.Com</a></li> <li><a href=http://www.jb51.net/web/"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横向分列内容请搜素剧本之家早年的文章或下面相干文章，但愿各人往后多多支持剧本之家！ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
