不佔用100％寬度的CSS對象

大約9年後，我又回到了網絡編程。改變了很多！不佔用100％寬度的CSS對象

我在我的網站上取得了一些進展，但有一件事真的讓我感到厭煩。我按照屏幕頂部的靜態標題的教程。 http://www.cssreset.com/creating-fixed-headers-with-css/

足夠簡單，但是我已經穿過屏幕（通過在標題類中設置底部邊框）的線條不會一直走到左邊。看起來它有幾個像素去。通過比較，右側似乎沒有問題。

非常簡潔明瞭，易於

.header { 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    height: 30px; 
    background: #FFFFFF; 
    border-bottom: 1px solid #C0C0C0; 
    margin: 0 auto; 
    vertical-align: middle; 
    z-index: 1000; 
}

你可以看到在這裏的行動頁： http://onfilm.us/image_index.html

來源

2014-10-05 kiss-o-matic

歡迎回到StackOverflow！您可以通過點擊投票按鈕下方的複選標記來接受解決該問題的答案，而不是在標題中添加「[已解決]」（這適用於論壇和其他非搜索位置）。 – 2014-10-05 19:49:27

完成。我確實知道這一點，但是它讓我感到不知所措。： -/ – 2014-10-05 20:31:21

@ kiss-o-matic：我想你已經接受了答案，但忘記從標題伴侶中刪除[已解決]。這並不是必需的，所以我已經把它回滾了。 – Harry 2014-10-06 04:12:04

將您的body餘量設置爲零。默認情況下，瀏覽器有一個非零值，這就是導致它的原因。

body { 
    margin: 0; 
}

你可能要考慮使用reset.css置零邊距和補等等，所以你避免這些問題。這裏有一個鏈接到他們一堆的網站：http://www.cssreset.com/

來源

2014-10-05 19:12:42 veddermatic

謝謝 - 就是這樣！還要感謝重置提示。將研究它。 – 2014-10-05 19:15:53

在你onfilm.css文件，在你的身體標記添加margin: 0;

body { 
    padding: 0; 
    margin: 0; 
    text-align: center; 
}

它應該解決您的問題！一個好的做法是使用如下所述的reset.css文件：http://www.cssreset.com/what-is-a-css-reset/

來源

2014-10-05 19:12:37 BigPino

謝謝！愛一線解決方案。 – 2014-10-05 19:16:13

不客氣！祝你好運！ – BigPino 2014-10-05 19:19:02

頭部是否包含在另一個html元素內？也許你的頭部的父母不是100％，並且它有一個左邊距，所以當你給頭部100％的寬度時，它需要它的父親的寬度。

來源

2014-10-05 19:16:29 OryanM

不佔用100％寬度的CSS對象

回答

相關問題