添加一個10px的填充或邊距到一個div沒有區別

在下面的情況下，我試圖添加一個10px的邊距或填充到裏面的div，它有類「url」，但沒有任何適用於它的東西。添加一個10px的填充或邊距到一個div沒有區別

我可以看到，給它一個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>

來源

2014-09-25 Norman

我昌你浮動DIV編輯你的填充： {padding：0px 0px 0px 0px;}然後我看到了一個清晰的變化......你想要div中的文本有一個填充？ – Katler 2014-09-25 12:39:25

@skibbi_bizzle哪個div？ – Norman 2014-09-25 12:43:03

與類URL？那是正確的嗎？如果我將它們全部設置爲0，它們是明顯的變化... – Katler 2014-09-25 12:44:36

margin-left未應用，因爲您尚未爲url div添加float:left。因此，它開始計算從左邊的位置零開始。它適用於你margin-left:120px，因爲第一個div width + padding是120px。

我已經做了其他更改，以便將您的active box對齊，您可以在我的小提琴中查看它。

你要清楚使用clear:both

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

來源

2014-09-25 13:15:56

我didn'想想這個方法... +1（明確：兩者）即 – Katler 2014-09-25 13:19:36

@Norman請投票答覆，因爲它是正確的... – Katler 2014-09-25 13:40:20

你可以用你的.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/

來源

2014-09-25 13:09:52 Berthy

添加一個10px的填充或邊距到一個div沒有區別

回答

相關問題