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，使其跨屏幕

回答

相關問題