Question

我在网上查看了我的问题的答案，但我查询的大部分回复都是在问我的问题的相反问题，这似乎是一个常见的问题。我想分隔两个具有20像素空间的div，以便div显示为2个矩形而不是1个。

这是我的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

Answer 1

使用margin非常简单，有很多方法可以做到这一点，但我采用了简单的方法在按钮2上放置一个类并设置margin-left: 20px;。

如果您不想添加课程，可以使用:nth-child(n)（或其他选择器，查找更多here），请注意这是使用CSS3。更多关于here。

＆＃13;

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

＆＃13;

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

＆＃13;

使用您提供的代码并使用nth-child(n)，您可以这样做。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

为希望空间简单的div添加边距。

2个Div之间的HTML / CSS空间

2 个答案: