Question

在下面的场景中，我尝试向内部的div添加10px的边距或填充，其中包含类＆＃34; url＆＃34;，但没有任何效果。

我可以看到给它120px的余量就可以了。

我如何做类似于我尝试做的事情，并且仍然有10px的保证金或填充到类网址的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

margin-left未应用，因为您没有为网址div添加float:left。因此，它是从左侧位置零开始计算的。它适用于您margin-left:120px因为第一个div width + padding是120px。

我做了其他更改，将您的active box对齐，您可以在我的小提琴中查看。

您必须使用clear:both

清除您的浮点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课程

中添加margin-right

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

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

2 个答案: