0

WebSpace という Web サイトを作成しています。ヘッダーの背景色を端から端まで引き延ばしたいと考えています。現在、次のようになっています。

ここに画像の説明を入力

可能であれば、クリーンなソリューションで、上、左、右の余分な空白を取り除きたいです。

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 に答える