CSS拉伸div使其在屏幕上伸展

Question

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

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>

CS中引用的某些元素与HTML略微无关。谢谢！

Answer 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>

Answer 2

标题do

width:100%;
position:relative;

如果它应该始终保持在上衣上

width:100%;
position:fixed;

也不应如注释中提到的内联显示标题元素。对我来说，带有100％的桨似乎很奇怪

Answer 3

这个答案并不应该得到自己的帖子，但是由于我无法评论，所以我去了：

首先，拥有一项资源来帮助您进行努力总是很有帮助的。在这种情况下，我建议这样的网站来帮助您。

至于您的示例：

#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;
}

Answer 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>

Answer 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>

Answer 6

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

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