向div添加10px填充或边距没有区别

Question

在以下情况下，我试图向内部的div添加10px的边距或填充，该div具有类“ url”，但没有任何用处。

我可以看到，给它一个120px的边距可以完成这项工作。

我该如何做类似我尝试做的事情，仍然有10px的边距或使用类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>

Answer 1

由于您尚未为网址div添加float:left ，因此未应用margin-left 。 这样就可以从左位置零开始进行计算。 它适合您margin-left:120px因为第一个div width + padding为120px。

我进行了其他更改，以将active box右对齐，您可以在我的小提琴中进行检查。

您必须使用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;  
    }

DEMO

Answer 2

您可以将.url内部内容包装在div中，并向其中添加填充。 类似于.inner-url 。

<div class="outer">
<div class="site">site</div>
<div class="url"><div class="inner-url">Need some 10px space here from the right</div>
    <div class="status">active</div>
</div>

.inner-url{
    padding: 0 10px 0 10px;
    display: inline-block;
}

http://jsfiddle.net/1kha7xkb/9/

要么

只需向您的.site类添加保证金权利

http://jsfiddle.net/1kha7xkb/5/