html - 将菜单宽度增加到页面大小

Question

我正在尝试创建一个横跨整个页面的菜单。但是，即使我将宽度设置为 100%，它也不会在屏幕上拉伸(stretch)。

这是我的代码:

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>

Answer 1

你只需要添加 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 上

这里有一个 fiddle 供您展示它的工作原理 - http://jsfiddle.net/andyjh07/Ldu3o1jm/