CSS 拉伸 div 使其在屏幕上拉伸答案

【问题标题】：CSS Stretching div so that it stretch across screenCSS 拉伸 div 使其在屏幕上拉伸
【发布时间】：2017-04-18 11:15:54
【问题描述】：

我正在制作一个网站，对于该网站，我正在使用顶部的导航栏。我想要的是让栏位于页面顶部，并且它是主页的单独颜色。这是我当前的代码：

body {
  font-family: "Baloo Bhaina";
}

h1 {
  margin-top: 250px;
  font-size: 75px;
  text-align: center;
}

a {
  text-decoration: none;
  color: white;
  margin-left: 10px;
  font-size: 20px;
}

#header {
  background-color: DeepSkyBlue;
  color: white;
  display: inline;
  padding-left: 100%;
  padding-right: 100%;
  padding-top: 20px;
}

<div id="header">
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">Who we are</a>
  <a href="">Contact Us</a>
</div>

CSS 中引用的一些元素与 HTML 有点无关，appoligies。谢谢！

【问题讨论】：

这段代码有什么问题？有几个可能的问题，例如您的标头设置为display: inline，但除非我们知道您看到什么以及您想要实现什么，否则很难提供帮助。
删除#header的显示和填充，如果是关于居中链接，则添加text-align
抱歉，padding-left: 100% 的事情。我只是在测试东西并忘记删除它们。在当时看来是个天造地设的主意。

标签： html css menu navigation

【解决方案1】：

这是修复导航部分，内容部分在下面，带有不同的background-color。

body {
    font-family: "Baloo Bhaina";
}

h1 {
    margin-top: 250px;
    font-size: 75px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #333;
    margin: 5px;
    font-size: 20px;
}

#header {
    background-color: DeepSkyBlue;
    display: inline-block;
    padding: 10px;
    width:100%;
    text-align:right;
    position:fixed;
    z-index:99;
    left:0px;
    top:0px;
}

#content {
   width:100%;
   background:tomato;
   margin-top:45px;
   padding:5px;
}

<div id="header">
    <a href="">Home</a>
    <a href="">Products</a>
    <a href="">Who we are</a>
    <a href="">Contact Us</a>
</div>
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
<br><br>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
 <br><br>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
  <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
</p>
</div>

【讨论】：

【解决方案2】：

对于标题做

width:100%;
position:relative;

如果它应该始终保持在顶部

width:100%;
position:fixed;

标题元素也不应该像 cmets 中提到的那样内联显示。 100% 的填充对我来说也很奇怪

【讨论】：

【解决方案3】：

这个答案真的不值得它自己的帖子，但由于我不能发表评论，所以我去：

首先，手头有资源来帮助您完成工作总是很有帮助的。在这种情况下，我会建议像 this site 这样的东西来帮助你。

至于你的例子：

#header {
    background-color: DeepSkyBlue;
    color: white;
    display: inline; /* if you're trying to get your <a> tags aligned, it's probably better to do it another way. */
    width: 100%; /* done */
    /*padding-left: 100%;
    padding-right: 100%; why would you even do this*/
    padding-top: 20px;
}

【讨论】：

【解决方案4】：

仅使用 css 代码

如果您想在顶部修复它，请使用 position:fixed 和 left 和 right 属性 0px。

body {
    font-family: "Baloo Bhaina";
}

h1 {
    margin-top: 250px;
    font-size: 75px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #333;
    margin: 5px;
    font-size: 20px;
}

#header {
    background-color: DeepSkyBlue;
    display: inline-block;
    padding: 10px;
    width:100%;
    text-align:right;
}

<div id="header">
    <a href="">Home</a>
    <a href="">Products</a>
    <a href="">Who we are</a>
    <a href="">Contact Us</a>
</div>

【讨论】：

这很好，唯一的事情是我希望它能够伸展到屏幕的末端并且没有一点“空白”与它和其余部分接壤网站，如果有意义的话。
我使用width:100%，如果你需要小的改变你想要的宽度。如果屏幕左侧 litbit 空间，您可以使用margin-left:0px; 或寻求我的第二个答案
是的，我发现我所要做的就是将 top 和 left 设置为 0px。就这么简单。

【解决方案5】：

为了说明我的评论：

a {
  text-decoration: none;
  color: white;
  margin-left: 10px;
  font-size: 20px;
}

#header {
  background-color: DeepSkyBlue;
  color: white;
  padding-top: 20px;
  text-align:center
}

<div id="header">
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">Who we are</a>
  <a href="">Contact Us</a>
</div>

【讨论】：

【解决方案6】：

body {
    font-family: "Baloo Bhaina";
    margin: 0;
    padding: 0;
    background: #000;
}
#header {
background-color: DeepSkyBlue;
    color: white;
    padding: 20px;
}

不要使用绝对位置，不需要#header { display: inline;宽度：100%； }。删除这些行也形成代码

【讨论】：

不要使用 cmets 将信息添加到您的答案中。编辑您的答案，然后删除您的评论。