2個div之間的HTML/CSS空間

我查看了網絡上的問題答案，但大部分對我的查詢的回覆都提出了與我的問題相反的問題，這似乎更像是一個常見問題。我想要分隔兩個div有20像素的空間，這樣div可以顯示爲2個矩形而不是一個。2個div之間的HTML/CSS空間

這裏是我的CSS：

#balances { 
font-family:Lato; 
background-color:#00253F; 
color:#FFFFFF; 
font-size:28px; 
padding-left:15px; 
font-weight:bold; 
padding-right:10px; 
padding-top:15px; 
height:130px; 
width:52%; 
float:left; 
} 

#transact { 
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
background-color:#00253F; 
color:#FFFFFF; 
font-size:28px; 
padding-left:15px; 
font-weight:bold; 
padding-right:10px; 
padding-top:15px; 
height:130px; 
width:52%; 
float:left; 
}

這是HTML：

<body> 
    <div id="main-page-content"> 

      <div id="balances"> 
       <u>Balances</u> 
       <div class="total-balance">Total Balance</div> 


       <div class="balance">Balance: 
        <a href="#" class="button"/>Deposit</a> 
        <a href="#" class="button"/>Withdraw</a> 
       </div> 

       <div class="fbalance"> 
        <a href="#" class="button"/>Deposit</a> 
        <a href="#" class="button"/>Withdraw</a> 
       </div> 

      </div> 

      <div id="transact"> 

      </div> 

    </div> 
</body>

以上的結果： Result of the code I've given

來源

2015-05-06 Corona

使用'margin' ... – Ruddy

哪個'div'元素是你想要分開的？ –

只是看到代碼它似乎你需要給''標籤之間的空間。所以給'a'標籤留下餘量。你可以嘗試像這樣'.balance> a：最後一個孩子margin：0 0 0 15px;紅色; '檢查演示。 http://jsbin.com/vuhulopimo/1/edit?html,css,output –

很簡單使用margin，有很多種方法來做到這一點，但我用簡單的方法在按鈕2上放置課程並設置margin-left: 20px;。

如果你不想添加一個類，你可以使用:nth-child(n)（或其他選擇器，找到更多 here），請注意，這是使用CSS3。更多關於那here。

.button { 
 
    width: 100px; 
 
    height: 20px; 
 
    background: blue; 
 
    float: left; 
 
    color: #fff; 
 
} 
 
.button2 { 
 
    margin-left: 20px; 
 
}

<div class="button">Button 1</div> 
 
<div class="button button2">Button 2</div>

使用你提供的代碼，並使用nth-child(n)，你能做到這樣。

.balance a:nth-child(2) { 
 
    margin-left: 20px; 
 
} 
 
.fbalance a:nth-child(2) { 
 
    margin-left: 20px; 
 
} 
 
#balances { 
 
    font-family:Lato; 
 
    background-color:#00253F; 
 
    color:#FFFFFF; 
 
    font-size:28px; 
 
    padding-left:15px; 
 
    font-weight:bold; 
 
    padding-right:10px; 
 
    padding-top:15px; 
 
    height:130px; 
 
    width:100%; 
 
    float:left; 
 
} 
 
#transact { 
 
    font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
 
    background-color:#00253F; 
 
    color:#FFFFFF; 
 
    font-size:28px; 
 
    padding-left:15px; 
 
    font-weight:bold; 
 
    padding-right:10px; 
 
    padding-top:15px; 
 
    height:130px; 
 
    width:52%; 
 
    float:left; 
 
}

<div id="balances"> <u>Balances</u> 
 
    <div class="total-balance">Total Balance</div> 
 
    <div class="balance">Balance: 
 
     <a href="#" class="button">Deposit</a> 
 
     <a href="#" class="button">Withdraw</a> 
 
    </div> 
 
    
 
    <div class="fbalance"> 
 
     <a href="#" class="button">Deposit</a> 
 
     <a href="#" class="button">Withdraw</a> 
 
    </div> 
 
</div>

來源

2015-05-06 08:29:48 Ruddy

爲什麼你使用'nnth-chiild'？在這種情況下，我們可以簡單地使用「最後一個孩子」。 –

@KheemaPandey爲了保持簡單，OP不知道如何使用'margin'，爲什麼我會將它們與各種不同的選擇器混淆。它只是一個例子。 – Ruddy

你的第一個例子更簡單。我喜歡那一個.. –

添加保證金要在其中空間簡單的div。

來源

2015-05-06 08:31:08

2個div之間的HTML/CSS空間

回答

相關問題