gpt4 book ai didi

html - 内部 div 不适合外部 div。两者都有填充 : 10px. 两者都有宽度:100%

转载 作者:行者123 更新时间:2023-11-28 01:30:40 25 4
gpt4 key购买 nike

虽然我的内部 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 并为 #pagetop 添加负左右 margins

#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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com