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/

Answer 2

我没有50个评论上述答案的声誉，但是：列表项需要内联显示，或浮动到左侧，因此结果将是问题中显示的问题的水平导航。

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

2 个答案: