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

时间：2021-05-08

大多数的导航栏都是横向排列如下图所示，那么这究竟是怎么实现的呢？其实它主要运用<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横向排列的实现示例的文章就介绍到这了,更多相关HTMl li横向排列内容请搜素以前的文章或下面相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章