在下面的场景中，我尝试向内部的 div 添加 10px 的边距或填充，它具有类“url”，但没有任何效果。
我可以看到给它 120 像素的边距就可以了。
我如何做一些像我正在尝试做的事情，并且仍然有 10 像素的边距或填充到带有类 url 的 div？
此外，具有类状态的 div 不会显示为水平对齐。
我不介意更改任何内容，只要它能正常工作即可。你能帮我吗？我放弃了尝试。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Dev</title>
<style type="text/css">
.outer {
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
font-size: 12px;
border:1px solid #e1e1e8;
background:#f7f7f9;
}
.site {
float:left;
width:100px;
padding:10px;
border-right:1px solid #ECECF0;
background:#fbfbfc;
color:#BEBEC5;
}
.url {
padding:10px 10px 10px 10px;
color:#D14;
text-shadow:0 1px 0 #fff;
}
.status {
float:right;
padding:3px;
background:#F5f5f5;
border:1px solid #ececF0;
color:#D14;
text-shadow:0 1px 0 #fff;
font-size:10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="site">site</div>
<div class="url">http://www.google.com
<div class="status">active</div>
</div>
</div>
</body>
</html>
最佳答案
margin-left 未应用，因为您尚未为 url div 添加 float:left。所以它开始是从左位置零开始计算。它适用于 margin-left:120px 因为第一个 div width + padding 是 120px。
我已经做了其他更改以将您的 active box 对齐，您可以在我的 fiddle 中检查它。
你必须使用 clear:both 清除你的 float div
HTML
<div class="outer">
<div class="site">site</div>
<div class="url">Need some 10px space here from the right
<div class="status">active</div>
</div>
<div style="clear:both"></div>
</div>
CSS
.url {
float:left;
padding:10px 10px 10px 10px;
color:#D14;
text-shadow:0 1px 0 #fff;
margin-left:20px;
}
关于html - 向 div 添加 10px 的填充或边距没有区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26038853/