CSS拉伸DIV，使其跨屏幕

我正在做一个网站和网站，我使用的是顶部的导航栏。我想要的是酒吧在页面的顶部，它是一个独立的主页面的颜色。这里是我当前的代码：CSS拉伸DIV，使其跨屏幕

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。谢谢！

来源

2017-04-18 JohnyNich

这段代码有什么问题？有几个可能的问题，例如您的标题设置为“display：inline”，但除非我们知道您所看到的以及您想要实现的内容，否则很难提供帮助。 – Toby

删除显示和填充到#header，然后添加文本对齐，如果它是关于中心链接 –

对不起填充左：100％的东西。我只是测试了一些东西，忘记删除它们。当时看起来像一个上帝的想法。 – JohnyNich

这是修复NAV部分和下面内容的部分是用不同的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>

来源

2017-04-18 11:33:00 LKG

对于头做

width:100%; 
position:relative;

是否应该始终在最前面

width:100%; 
position:fixed;

留粘也可以作为在评论中提到的头元素不应该显示在线。用100％的垫衬觉得奇怪，我藏汉

来源

2017-04-18 11:21:02 RacoonOnMoon

这样的回答并没有真正值得它自己的职位，但因为我不能发表评论，我来到这里：

首先，它总是有帮助的资源在用手帮助你做出努力。在这种情况下，我会建议像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; 
}

来源

2017-04-18 11:21:29 Wep0n

使用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>

来源

2017-04-18 11:22:04 LKG

这很好，唯一的是我更喜欢它伸展出来，所以它到达了屏幕的末端，并且没有一点“空白”与它和网站的其他部分接壤，如果有意义的话。 – JohnyNich

如果您需要小幅更改宽度，我会使用'width：100％'。如果屏幕左侧有空位，你可以使用'margin-left：0px;'或者去找我的第二个答案 – LKG

是的，我想我所要做的就是将top和left设置为0px。那样容易。 – JohnyNich

来说明我的评论：

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>

来源

2017-04-18 11:33:11

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

不使用绝对位置，也没有必要的#header的{显示：一致;宽度：100％; }。删除这些行也是表格代码

来源

2017-04-18 11:39:56 Qamar

请勿使用注释将信息添加到答案中。编辑你的答案，然后删除你的评论。 – mickmackusa

CSS拉伸DIV，使其跨屏幕

回答

相关问题