程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> html css-footer標簽寬度修改不了。

html css-footer標簽寬度修改不了。

編輯：編程解疑

footer標簽寬度修改不了。

就是圖中下面那塊有背景顏色的，兩邊還是白色的。後來看了下好像是.contanter css設置的問題，可以在不該.contanter的情況下讓fooler的背景顏色填充滿下面嗎？
html代碼

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>My First Website</title>
</head>
<body>
    <header>
        <nav class="clearfix"> <!--導航開始-->
            <div class="logo c1"><a href="index.html">FIRST</a></div>
            <div class="items c2">
                <ul>
                    <li><a href="http://www.baidu.com">baidu</a></li>
                    <li><a href="http://www.bilibili.com/">bilibili</a></li>
                    <li><a href="https://www.zhihu.com/">zhihu</a></li>
                    <li><a href="#">about</a></li>
                </ul>
            </div>
        </nav>
        <div class="inner">
            <h1>My First Website</h1>
                <div class="h1-sub">
                16.11.09
                </div>
        </div>
    </header><!--導航結束-->
        <div class="content"><!--內容開始-->
            <div class="contanter">
                <div class="story-item">
                    <h2><a href="story.html">第一個只用了html和css的網站</a></h2>
                    <div class="summary">用了只是學了兩三天的技能來實現一個網頁的布局，看似簡單卻一點都不容易，margin的問題真的很多，div也是一個大問題，主要是要理解選擇器之間的關系。
                </div>
                <div class="info">16-11-10|作者：Chan|閱讀：1</div>
                </div>
        </div><!--內容結束-->
    <footer><!--頁尾開始-->
        <div class="foot-item">
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul></div>
    </footer><!--頁尾開始-->
</body>
</html>

css代碼如下

 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a{
  text-decoration:none;
}

h1{
  margin: 20px;
  color: white;

}
ul{
  margin: 0;
  padding: 0;
}

.c1,.c2{
  position: relative;
  float: left;

}

.c1{
  width: 16.666666%;
}

.c2{
  width: 83.333333%;
}

.clearfix:before
{
  content: " ";
  display:table;
}

.clearfix:after
{
  content: " ";
  display:table;
}

.logo{
  font-size: 20px;
  padding: 18px;
  font-weight: 900;
  color: #ddd;
}

header{
  min-height: 350px;
  background-color: #aaa;
  background-image: url('img/IMG_3052_1.jpg');

  background-size: cover;
}

nav{
  background-color: #333;

}

nav .logo.c1 a{
  color: #ddd;
}

nav .logo.c1 a:hover
{
  color: #eee;
}

nav .items ul{
  float: right; 
  padding-right: 20px;
}

nav ul li{
  list-style: none;
  display: inline-block;
}

nav ul li a{
  display: inherit;
  text-decoration: none;
  padding: 20px 10px;
  color: #fff;
}
nav ul li a:hover{
  color: #eee;
}


/*nav end*/
.inner {
  width: 400px;
  margin: 150px auto ;
  margin-bottom: 0;
  position: relative;
  text-align: center;

}

.h1-sub{
  font-weight: 900;
  text-align:right;
  padding: 20px;
  color: white;
}

.contanter{
  width: 800px;
  margin: 0 auto;
  ;
}

.story-item h2{
  font-size: 30px;
  margin: 10px 0;
  font-family: Microsoft Yahei;
  color: #444;
}
h2 a{
  color:#444;
}

.story-item .summary{
  font-size: 18px;
  font-family: Microsoft Yahei;
  width: 500px;
  font-weight: 100;
  color: #777;
  margin: 20px 0;
}

.info{
  width: 700px;
  font-size: 15px;
  color: #aaa;
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #aaa;
}

footer{
  margin: 0 auto;
  background-color: #777;
}

footer .foot-item ul{
  list-style: none;
  text-align: center;
  padding-top: 100px;
}

.foot-item ul li{
  display:inline-block;
  padding: 20px;
}