在div中添加10px填充或边距没有任何区别

In the following scenario, I'm trying to add a 10px margin or padding to the div that is inside, which has class "url", but nothing works for it.

在下面的场景中,我试图向内部的div添加10px的边距或填充,其中包含类“url”,但没有任何效果。

I can see that giving it a margin of 120px does the job.

我可以看到给它120px的余量可以完成这项工作。

How do I do something like what I'm attempting to do, and still have a 10px margin or padding to the div with class url?

我如何做我正在尝试做的事情,并且仍然有10px的余量或填充到类url的div?

Also, the div with class status will not appear aligned horizontally.

此外,具有类状态的div不会出现水平对齐。

I don't mind anything being changed, as long as it'll work. Can you help? I gave up trying.

我不介意任何改变,只要它能奏效。你能帮我吗?我放弃了尝试。

Fiddle

<!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>

2 个解决方案

#1

The margin-left not applied because you have not add float:left for the url div. So that it is started it is calculation from left position zero onwards. It works for you margin-left:120px because the first div width + padding is 120px.

由于您没有为url div添加float:left,因此未应用margin-left。因此它开始是从左侧位置零开始计算。它适用于你左边距:120px因为第一个div宽度+填充是120px。

I have made other changes to align your active box to right, you can check it in my fiddle.

我做了其他更改以将您的活动框对齐,您可以在我的小提琴中查看它。

You have to clear your float div using clear:both

你必须使用clear清除你的浮点数:两者

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

#2

You can wrap your .url inner content in a div and add your padding to it. Something like .inner-url.

您可以将.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/

Just add margin-right to your .site class

只需在.site类中添加margin-right即可

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

#1