您现在的位置是：网站首页> 编程资料编程资料

HTMl中标签中li横向排列的实现示例css实现图片横向排列滚动效果让几个横向排列的浮动子div居中显示的方法让横向排列的几个浮动(float:left)的子div居中显示CSS的ul和li实现横向排列和去掉li的点

2023-10-08 370人已围观

简介这篇文章主要介绍了HTMl中标签中li横向排列的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

大多数的导航栏都是横向排列如下图所示，那么这究竟是怎么实现的呢？其实它主要运用

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

Baidu.Com
Jb51.net
Yahoo.Com
Google.Com

2 编写CSS代码

<1>设置公共样式

<3>链接悬停效果

<4>去掉最左边导航栏的右边框

3 完整的代码

图片提示效果Baidu.Com
Jb51.net
Yahoo.Com
Google.Com

在线运行

<!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>

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

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

的主要样式为display:inline-balock,float：left,list-style:none;
到此这篇关于HTMl中标签中li横向排列的实现示例的文章就介绍到这了,更多相关HTMl li横向排列内容请搜素以前的文章或下面相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：html 表格比较宽溢出的解决方法全面了解html.css溢出html文本溢出显示省略字符的两种常用解决方法

下一篇：解决vscode 中保存后html自动格式化的问题vscode怎么设置html标签自动补全? vscode自动补全html的技巧VSCode 自定义html5模板的实现VSCode怎么安装插件运行HTML文件?SublimeText3怎么快速输入html5格式?Sublime Text2怎么新建一个HTML头部文件?sublime / vscode 快捷生成HTML代码的实现

您现在的位置是：网站首页> 编程资料编程资料

HTMl中标签中li横向排列的实现示例css实现图片横向排列滚动效果让几个横向排列的浮动子div居中显示的方法让横向排列的几个浮动(float:left)的子div居中显示CSS的ul和li实现横向排列和去掉li的点

相关内容

点击排行

本栏推荐

猜你喜欢