html - 将 CSS 中的组件拉伸(stretch)到整个页面宽度

Question

我有以下代码:https://jsfiddle.net/u8db2j75/1/它工作正常，我得到了我想要的效果 - 图片和旁边的一些文字。但现在我想添加另一个组件，一个导航栏 - 我想将它添加到页面顶部。所以我按照这里给出的例子做了什么 http://css-snippets.com/simple-horizontal-navigation/我创建了这样的代码:

<div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="news"><a href="#">Newsletter</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </div>  

https://jsfiddle.net/u8db2j75/2/然而，在修改 css 之后 - 如您所见 - 效果与我预期的相去甚远...这里到底出了什么问题？

Answer 1

将 .nav ul 和 .nav 的 min-width 设置为 100%。

例子:

.nav {
    min-width:100% !important;
}
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  min-width: 100%;
}

https://jsfiddle.net/u8db2j75/4/