不占用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对象

回答

相关问题