我的内部div设置为width:100%不能填充外部div。我想是因为填充，但我不确定。如何使内部div与外部div的宽度相匹配？谢谢。
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;}
最佳答案
移除width并为margins添加负的左和右#pagetop。
#pagetop {
margin: 0 -10px;
width: auto; /* default value, just remove width: 100% */
}
https://jsfiddle.net/hmv753s4/1/
关于html - 内部div不适合外部div。两者都有填充:10px。两者都有宽度:100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30401594/