Question

我正在建立一个网站和网站，我使用的是位于顶部的导航栏。我想要的是条形图位于页面顶部，它是主页面的单独颜色。这是我目前的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS中引用的一些元素与HTML，appoligies略有不相关。谢谢！

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

对于标题执行

width:100%;
position:relative;

如果它始终保持粘性

width:100%;
position:fixed;

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

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

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

说明我的评论：

＆＃13;

a {
  text-decoration: none;
  color: white;
  margin-left: 10px;
  font-size: 20px;
}

#header {
  background-color: DeepSkyBlue;
  color: white;
  padding-top: 20px;
  text-align:center
}

＆＃13;

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

＆＃13;

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％; }。删除这些行也形成代码

CSS拉伸div使其跨越屏幕

6 个答案: