2
我的內部div雖然設置爲寬度:100%不會填充外部div。我認爲這是因爲填充,但我不確定。我如何獲得內部div適合外部div的寬度?謝謝。內部div不適合外部div。兩者都有填充:10px。兩者都有寬度:100%
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;}
你有沒有嘗試刪除填充找出? –
@Paulie_D:我希望'padding'可以縮進其他內容。 – panther