将 CSS 中的组件拉伸到整个页面宽度

Question

我有以下代码：https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here 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 一个 100% 的 min-width。

示例：

.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/

Answer 2

我没有 50 的声誉来评论上面的答案，但是：列表项需要内联显示，或浮动到左侧，以便结果将按照问题中显示的示例进行水平导航。

将 CSS 中的组件拉伸到整个页面宽度

Stretching the component in CSS to the full page width

html

css

navigationbar