我试图创建一个跨页面的菜单。但是,即使我将宽度设为100%,它也不会在屏幕上伸展。
这是我的代码:
select {
display: none;
}
nav {
margin: 0 auto;
text-align: center;
background: #fff;
height: 70px;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148, 148, 149, 1);
background: -moz-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 148, 149, 1)), color-stop(36%, rgba(192, 192, 192, 1)), color-stop(100%, rgba(192, 192, 192, 1)));
background: -webkit-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -o-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -ms-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: linear-gradient(to bottom, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0);
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px 7px;
color: #000;
text-decoration: none;
}
nav ul li~li {
border-left: 1px solid #857D7A;
}
nav .active a {
background: rgba(180, 85, 12, 1);
background: -moz-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(180, 85, 12, 1)), color-stop(36%, rgba(234, 110, 16, 1)), color-stop(100%, rgba(234, 110, 16, 1)));
background: -webkit-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -o-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -ms-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: linear-gradient(to bottom, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b4550c', endColorstr='#ea6e10', GradientType=0);
color: #fff;
}
@media (max-width: 480px) {
select {
display: block;
width: 200px;
margin: 0 auto;
}
nav {
display: none;
}
}

<nav>
<ul>
<li class="active"><a href="#">Item 1</a>
</li>
<li><a href="#">Item 2</a>
</li>
<li><a href="#">Item 3</a>
</li>
<li><a href="#">Item 4</a>
</li>
<li><a href="#">Item 5</a>
</li>
</ul>
</nav>
<select>
<option value="#">Item 1</option>
<option value="#">Item 2</option>
<option value="#">Item 3</option>
<option value="#">Item 4</option>
<option value="#">Item 5</option>
</select>
&#13;
答案 0 :(得分:3)
您只需将width: 100%;
添加到nav ul
,就像这样:
nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}
如果您希望按钮展开,则需要使用display: table;
上的nav ul
,然后display: table-cell;
上的nav ul li
这是一个显示它正常工作的小提琴 - http://jsfiddle.net/andyjh07/Ldu3o1jm/
答案 1 :(得分:-1)
检查this Codepan。你需要改变它。
nav ul
{
width:100%
}