css响应式页面的问题
我想当屏幕宽小于400时，daohangbtn宽就等于页面宽，我给daohangbtn加了个width:100%，发现不行。代码要怎么改？注意，我要css实现的，谢谢。<...
我想当屏幕宽小于400时，daohangbtn宽就等于页面宽，我给daohangbtn加了个width:100%，发现不行。
代码要怎么改？注意，我要css实现的，谢谢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#biaotilan{
height:auto;
overflow:hidden;
line-height:80px;
border-bottom:1px solid #E5E5E5;
}
#biaoti{
font-size:28px;
color:#3B2678;
margin-left:20px;
}
ul{
font-size:18px;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
display:inline;
}
#biaoti,li{float:left;}
#caidan{
float:right;
margin-right:20px;
}
.daohangbtn{
display:block;
width:100px;
height:78px;
color:#212425;
text-align:center;
text-decoration:none;
text-transform:uppercase;
cursor:pointer;
}
.daohangbtn:hover,.daohangbtn:active{
color:#FF6C00;
border-bottom:2px solid #FF6C00;
}
@media only screen and (max-width: 400px) {
#biaoti{
font-size:18px;
}
.daohangbtn{
width:100%;
}
}
</style>
</head>
<body>
<div id="biaotilan">
<div id="biaoti">支撑系统</div>
<div id="caidan">
<ul>
<li><span class="daohangbtn">新建</span></li>
<li><span class="daohangbtn">受理</span></li>
<li><span class="daohangbtn">待办</span></li>
<li><span class="daohangbtn">已完成</span></li>
</ul>
</div>
</div>
</body>
</html> 展开
代码要怎么改？注意，我要css实现的，谢谢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#biaotilan{
height:auto;
overflow:hidden;
line-height:80px;
border-bottom:1px solid #E5E5E5;
}
#biaoti{
font-size:28px;
color:#3B2678;
margin-left:20px;
}
ul{
font-size:18px;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
display:inline;
}
#biaoti,li{float:left;}
#caidan{
float:right;
margin-right:20px;
}
.daohangbtn{
display:block;
width:100px;
height:78px;
color:#212425;
text-align:center;
text-decoration:none;
text-transform:uppercase;
cursor:pointer;
}
.daohangbtn:hover,.daohangbtn:active{
color:#FF6C00;
border-bottom:2px solid #FF6C00;
}
@media only screen and (max-width: 400px) {
#biaoti{
font-size:18px;
}
.daohangbtn{
width:100%;
}
}
</style>
</head>
<body>
<div id="biaotilan">
<div id="biaoti">支撑系统</div>
<div id="caidan">
<ul>
<li><span class="daohangbtn">新建</span></li>
<li><span class="daohangbtn">受理</span></li>
<li><span class="daohangbtn">待办</span></li>
<li><span class="daohangbtn">已完成</span></li>
</ul>
</div>
</div>
</body>
</html> 展开
3个回答
展开全部
@media only screen and (max-width: 400px) {
#biaoti{
font-size:18px;
}
#caidan{width:100%;}
#caidan li{width:100%;float:none;}
.daohangbtn{
width:100%;
}
}替换一下你的媒体查询的css，就可以了
这是效果
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
@media(min-width: 400px){
.daohangbtn{width:100%;}
｝
.daohangbtn{width:100%;}
｝
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你想让ul宽满页面，还是每一个li宽都是满页面。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
