0

我正在创建一个名为 WebSpace 的网站，我希望标题背景颜色从头到尾延伸。目前，它看起来像这样：

在此处输入图像描述

如果可能的话，我想用一个干净的解决方案摆脱顶部、左侧和右侧的额外空白。

这是HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/style.css"/>
    <link rel="stylesheet" href="/assets/layout.css"/>
    <title>WebSpace</title>
  </head>
  <body>
    <div class="row title">
      <span class="title">WebSpace</span>
    </div>
  </body>
</html>

style.css 文件：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,100&subset=cyrillic,cyrillic-ext,latin-ext,latin);
body { 
    font-family: 'Roboto', sans-serif;
}
span.title {
    font-weight: 100;
    font-size: 66px;
    width: 100%;
    float: left;
}

还有我的 layout.css 文件：

body { overflow-x:hidden; !important}
html { width: 100%; }
div.row { width: 100%; }
div.span10 { width: 100%; }
div.span9 { width: 90%; }
div.span8 { width: 80%; }
div.span7 { width: 70%; }
div.span6 { width: 60%; }
div.span5 { width: 50%; }
div.span4 { width: 40%; }
div.span3 { width: 30%; }
div.span2 { width: 20%; }
div.span1 { width: 10%; }

/*Row Styles*/
div.title {
    background-color: #F7D023;
    height: 100px;
    color: white;
    position: absolute:
    left: 0;
    right: 0;
    overflow-x:hidden;  !important
}
4

1 回答 1

5

浏览器使用不同的默认样式表。放：

html, body {
    padding: 0;
    margin: 0;
}

JSFiddle

或者更好的是，使用CSS reset。

于 2013-07-19T20:28:13.963 回答