2015-05-22 26 views
2

我的內部div雖然設置爲寬度:100%不會填充外部div。我認爲這是因爲填充,但我不確定。我如何獲得內部div適合外部div的寬度?謝謝。內部div不適合外部div。兩者都有填充:10px。兩者都有寬度:100%

myjsfiddle

HTML:

<html> 
<head> 
    <title>Clinical Molecular Incident Reporting System</title> 
    {% load staticfiles %} 
    <link rel="stylesheet" type="text/css" href="{% static 'error_tracking/css/master.css' %}"> 
</head> 
<body> 
    <div id="content"> 
     <div id="pagetop"> 
      <b>Clinical Molecular Incident Reporting System</b> 
      <span id="navigation"> 
      {% if user.is_authenticated %} 
       <a href="/search_incidents/">search incidents</a> | 
       <a href="/report_incident/">report incident</a> | 
       <a href="/resolve_incident/">resolve incident</a> 
       <span id="user-info">{{ user.username }} | <a href="/logout/">logout</a></span> 
      {% else %} 
       <span id="user-info"><a href="/login/">Login</a></span> 
      {% endif %} 
      </span> 
     </div> 
     {% block content %} 
     {% endblock content %} 
    </div> 
</body> 
</html> 

CSS:

html,body {font-family: Verdana; font-size: 16px;} 

#content { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #F6F6EF; 
    box-sizing: border-box; 
    ms-box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    moz-box-sizing: border-box; 
    padding: 0px 10px 10px 10px; 
} 

#pagetop { 
    width: 100%; 
    background-color: #04B4AE; 
    font-family: Verdana; 
    box-sizing: border-box; 
    ms-box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    moz-box-sizing: border-box; 
    padding: 10px; 
} 

#pagetop a:link {color:#000; text-decoration: none;} /* unvisited link */ 
#pagetop a:visited {color:#000; text-decoration: none;} /* visited link */ 
#pagetop a:hover {color:#000; text-decoration: underline;} /* mouse over link */ 
#pagetop a:active {color:#000; text-decoration: none;} /* selected link */ 

#navigation{padding-left: 15px;} 

#user-info {float: right;} 
+1

你有沒有嘗試刪除填充找出? –

+1

@Paulie_D:我希望'padding'可以縮進其他內容。 – panther

回答

相關問題