Question

我的内部div虽然设置为宽度：100％但不会填充外部div。我认为这是因为填充，但我不确定。如何让内部div适合外部div的宽度？感谢。

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;}

Answer 1

删除width并为margins添加左侧和右侧#pagetop。

#pagetop {
    margin: 0 -10px; 
    width: auto; /* default value, just remove width: 100% */
}

https://jsfiddle.net/hmv753s4/1/

内部div不适合外部div。两者都有填充：10px。两者都有宽度：100％

1 个答案: