今天分享下”HTMl&＃xff1a;标签li如何横向排列“这篇文章&＃xff0c;文中根据实例编码详细介绍&＃xff0c;或许对大家的编程之路有着一定的参考空间与使用价值&＃xff0c;需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 大部分的导航栏全是横向排列如下图所示&＃xff0c;那麼这到底是怎么完成的呢&＃xff1f;实际上它主要是应用标识中li的横向排列&＃xff0c;下边以一个事例向我们具体解读实际是怎样完成的。
1编写横向菜单的HTML代码架构
<ul id&＃61;"menu">
<li><a href&＃61;"http://www.baidu.com">Baidu.Com
<li><a href&＃61;"//www.jb51.net">Jb51.net
<li><a href&＃61;"http://www.yahoo.com">Yahoo.Com
<li><a href&＃61;"http://www.google.com" class&＃61;"last">Google.Com
2 编写CSS代码
<1>设置公共样式
1
2
3
4
5
6
7
8
9
10
11
12
#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
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高&＃xff0c;将行高和高度设置同一个值&＃xff0c;可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
<3>链接悬停效果
1
2
3
4
5
6
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
<4>去掉最左边导航栏的右边框
1
2
3
4
5
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
3 完整的代码
<html>
<head>
<meta charset&＃61;"utf-8">
<title>图片提示效果
<script src&＃61;"…/jquery-3.3.1.min.js">
<style type&＃61;"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; /* 设置行高&＃xff0c;将行高和高度设置同一个值&＃xff0c;可以让单行文本垂直居中 */
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; /* 去掉左侧边框 */
}
<body>
<ul id&＃61;"menu">
<li><a href&＃61;"http://www.baidu.com">Baidu.Com
<li><a href&＃61;"//www.jb51.net">Jb51.net
<li><a href&＃61;"http://www.yahoo.com">Yahoo.Com
<li><a href&＃61;"http://www.google.com" class&＃61;"last">Google.Com
在线运行
提示&＃xff1a;您可以先修改部分代码再运行
总之&＃xff0c;使其横向排列的最需要的是: 标签的主要样式为display:balock;
京公网安备 11010802041100号