如何才能让导航栏的宽度随着浏览器的窗口的变大而变变大，只能用css
@charset"utf-8";body,ul,li{margin:0;padding:0;}#head,#pagebody,#footer{clear:both;}#n...
@charset "utf-8";
body,ul,li{
margin:0;
padding: 0;
}
#head,#pagebody,#footer{
clear: both;
}
#nav{
width: 100%;
height: 70px;
background-color: rgba(0,0,0,0.8);
}
#a{
margin-left:2%;
width: 240px;
height: 70px;
float: left;
}
#nav li{
float: left;
list-style: none;
background-color: rgba(0,0,0,0);
height:70px;
width:100px;
line-height:460%;
text-align: center;
}
#nav #bar{
height: 100%;
margin-left: 50%;
width:50%
color: white;
}
a:link,a:active,a:visited{
color: white;
display: block;
}
#nav #bar a:hover{
background-color:rgba(0,0,0,1);
float: left;
display: inline-block;
}
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飘尘旅行社</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="nav">
<a href="实战1.html" id="a">
<img src="img/logo.png" id="img" />
</a>
<div id="bar">
<ul>
<a href="#"><li>首页</li></a>
<a href="#"><li>旅游资讯</li></a>
<a href="#"><li>机票订购</li></a>
<a href="#"><li>风景欣赏</li></a>
<a href="#"><li>公司简介</li></a>
</ul>
</div>
</div>
<div id="head">head</div>
<div id="pagebody">pagebody</div>
<div id="footer">footer</div>
</body>
</html>
本来我这li的宽度是用百分比的，但是hover的宽度一样厚，背景宽度是对的，但是li内容还是错的 展开
body,ul,li{
margin:0;
padding: 0;
}
#head,#pagebody,#footer{
clear: both;
}
#nav{
width: 100%;
height: 70px;
background-color: rgba(0,0,0,0.8);
}
#a{
margin-left:2%;
width: 240px;
height: 70px;
float: left;
}
#nav li{
float: left;
list-style: none;
background-color: rgba(0,0,0,0);
height:70px;
width:100px;
line-height:460%;
text-align: center;
}
#nav #bar{
height: 100%;
margin-left: 50%;
width:50%
color: white;
}
a:link,a:active,a:visited{
color: white;
display: block;
}
#nav #bar a:hover{
background-color:rgba(0,0,0,1);
float: left;
display: inline-block;
}
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飘尘旅行社</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="nav">
<a href="实战1.html" id="a">
<img src="img/logo.png" id="img" />
</a>
<div id="bar">
<ul>
<a href="#"><li>首页</li></a>
<a href="#"><li>旅游资讯</li></a>
<a href="#"><li>机票订购</li></a>
<a href="#"><li>风景欣赏</li></a>
<a href="#"><li>公司简介</li></a>
</ul>
</div>
</div>
<div id="head">head</div>
<div id="pagebody">pagebody</div>
<div id="footer">footer</div>
</body>
</html>
本来我这li的宽度是用百分比的，但是hover的宽度一样厚，背景宽度是对的，但是li内容还是错的 展开
2个回答
展开全部
首先是：<li><a>link</a></li>
而不是：<a><li>link</li></a>
然后你外面 ul 宽度设置成百分比了以后，里面 a 标签先 display: block; 接下来 a 宽度也要设成百分比，外面的 li 不要宽度(里面 a 设 block 了以后会撑开 li)，li 标签只 float 或 display: inline-block; 即可，li 标签可以加内外边距来撑开两个 li 直接距离，如果距离不是一两个像素的话，这种内外边距也要是百分比尺寸。
<ul id="nav">
<li><a>123</a></li>
<li><a>456</a></li>
<li><a>789</a></li>
</ul>
#nav{
width: 100%;
background: #333;
}
#nav a{
display: block;
width: 32%
background: yellow;
}
#nav li{display: inline-block;}
百分比不难，烦的是根据设计稿算每个元素的尺寸。
而不是：<a><li>link</li></a>
然后你外面 ul 宽度设置成百分比了以后，里面 a 标签先 display: block; 接下来 a 宽度也要设成百分比，外面的 li 不要宽度(里面 a 设 block 了以后会撑开 li)，li 标签只 float 或 display: inline-block; 即可，li 标签可以加内外边距来撑开两个 li 直接距离，如果距离不是一两个像素的话，这种内外边距也要是百分比尺寸。
<ul id="nav">
<li><a>123</a></li>
<li><a>456</a></li>
<li><a>789</a></li>
</ul>
#nav{
width: 100%;
background: #333;
}
#nav a{
display: block;
width: 32%
background: yellow;
}
#nav li{display: inline-block;}
百分比不难，烦的是根据设计稿算每个元素的尺寸。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
