标头未正确拉伸答案

【问题标题】：Header Doesn't Stretch Properly标头未正确拉伸
【发布时间】：2015-01-22 15:07:31
【问题描述】：

当我折叠我的网页时，我遇到了这个问题，标题缩小而不是在整个页面上保持拉伸。

在这种情况下，我真的不知道要发布什么代码。我尝试了各种方法来修复它，但似乎没有任何效果。有谁知道发生这种情况时会发生什么？这是我的标题 HTML 和 CSS：

#header {
  background-color: #C67171;
  width: 100%;
}
#headtop {
  text-align: right;
  width: 1000px;
  margin: 0 auto;
  vertical-align: middle;
  height: 58px;
}
a.nav {
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  color: #ffffff;
  line-height: 58px;
  padding: 20px 12px;

<div id="header">
  <div id="headtop">
    <a href="about.html" class="nav">About</a>
    <a href="gallery.html" class="nav">Gallery</a>
  </div>
</div>

样式就差不多了，非常感谢任何帮助！

编辑解释代码结果的图片。

这就是页面现在的样子。这就是我想要的样子。但是由于某种原因，当我折叠页面时，我不断遇到上图中的问题。我不想将链接延伸到我的页面外部，这并不能解决我的问题。

【问题讨论】：

你测试的是什么浏览器？
目前，我正在 Chrome 中对其进行测试。
@TylerDood 我无法重现这个问题。
@Ruddy 运行代码sn-p 是否有效？
在#headtop 中将width: 1000px; 更改为width: 100%;。

标签： css alignment stretch

【解决方案1】：

试试这个Fiddle

#header {
  background-color: #C67171;
  display:inline-block;
}
#headtop {
  text-align: right;
  width: 1000px;
  margin: 0 auto;
  vertical-align: middle;
  height: 58px;
}
a.nav {
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  color: #ffffff;
  line-height: 58px;
  padding: 20px 12px;

<div id="header">
  <div id="headtop">
    <a href="about.html" class="nav">About</a>
    <a href="gallery.html" class="nav">Gallery</a>
  </div>
</div>

【讨论】：

这不起作用，它的输出与原始代码相同。
@TylerDood 这对我来说很好用，我稍后会给你看一个屏幕截图
奇怪。运行代码 sn-p 的结果是什么？可以肯定的是，这只发生在页面折叠超过某个点时。
它在小提琴中可以正常工作，但是当我将它添加到我的页面并在代码sn-p中运行它时，它仍然具有相同的结果。

【解决方案2】：

问题是当窗口在屏幕上显示大于 1000 像素时，您的页面似乎可以正常工作。当你把它变小时，由于width: 100%;，标题会缩小。

但是随着我们变小，div #headtop 将保持相同的大小 width: 1000px;。所以标题会变小，但子元素 (#headtop) 仍然会很大，导致您看到滚动。

#header {
  background-color: #C67171;
  width: 100%;
}
#headtop {
  text-align: right;
  width: 100%;
  margin: 0 auto;
  vertical-align: middle;
  height: 58px;
}
a.nav {
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  color: #ffffff;
  line-height: 58px;
  padding: 20px 12px;
}

<div id="header">
  <div id="headtop">
    <a href="about.html" class="nav">About</a>
    <a href="gallery.html" class="nav">Gallery</a>
  </div>
</div>

以下是使链接远离两侧的方法（请参阅 cmets 了解更多信息）。给#headertop 一个最大宽度，然后给它一个 80% 的宽度，或者你想要的间隙。

JSFIddle Here

【讨论】：