使用display顯示第二個div的空間：inline-block

我在使用display：inline-block 2個元素時遇到了一個奇怪的問題。使用display顯示第二個div的空間：inline-block

也許我錯過了一些東西，但爲什麼在按鈕頂部有一些空間？

代碼在這裏：

.contact-validation { 
 
    text-align: right; 
 
} 
 

 
.contact-captcha { 
 
    width: 320px; 
 
    height: 90px; 
 
    background-color: #879; 
 
    display: inline-block; 
 
} 
 

 
.contact-submit { 
 
    display: inline-block; 
 
} 
 

 
.contact-button { 
 
    margin-top: 0; 
 
    height: 90px; 
 
    width: 300px; 
 
    font-size: 35px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    border: 0; 
 
}

<div class="contact-validation"> 
 
    <div class="contact-captcha"></div> 
 
    <div class="contact-submit"> 
 
    <button type="submit" class="contact-button">Get in Touch</button> 
 
    </div> 
 
</div>

問題在這裏：http://jsbin.com/jowosejahe/edit?html,css,output

來源

2017-09-05 Florian_L

只是應用垂直對齊：

.contact-validation { 
 
    text-align: right; 
 
} 
 

 
.contact-captcha { 
 
    width: 35%; 
 
    height: 90px; 
 
    background-color:#879; 
 
    display: inline-block; 
 
} 
 

 
.contact-submit { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.contact-button { 
 
    margin-top: 0; 
 
    height: 90px; 
 
    width: 300px; 
 
    font-size: 35px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    border:0; 
 
}

<div class="contact-validation"> 
 
    <div class="contact-captcha"></div> 
 
    <div class="contact-submit"> 
 
     <button type="submit" class="contact-button">Get in Touch</button> 
 
    </div> 
 
</div>

來源

2017-09-05 18:37:49

答案是如此之快，我不能接受它還是哈哈。任何想法這是不是默認情況下？ –

我有變化相同的CSS，並刪除您可以取代二級

.contact-validation { 
    text-align: right; 
    display: inline-block; 
    float: right; 
} 

.contact-captcha { 
    width: 320px; 
    height: 90px; 
    background-color: #879; 
    /* display: inline-block; */ 
}

來源

2017-09-05 18:44:33

我想在我的電腦代碼，我可以看到像上有兩個div之間的空間奇怪的事情：

<div class="contact-captcha"></div> 
<div class="contact-submit"> 
    <button type="submit" class="contact-button">Get in Touch</button> 
</div>

如果刪除的div之間的換行符：

<div class="contact-captcha"></div><div class="contact-submit"> 
    <button type="submit" class="contact-button">Get in Touch</button> 
</div>

空間賭注他們消失。我認爲是因爲內聯塊的屬性，它將每個字符放入他的代碼中作爲要寫入的內容。另外，如果你像這樣結束你的第一個div：

<div class="contact-captcha"/> 
<div class="contact-submit"> 
    <button type="submit" class="contact-button">Get in Touch</button> 
</div>

它的工作原理也不同。也許你希望這種情況發生。希望它有一點幫助。

來源

2017-09-05 18:50:45 Reyeselda95

將這兩個元素更改爲包含float：right。

.contact-captcha { 
    width: 320px; 
    height: 90px; 
    background-color:#879; 
    display: inline-block; 
    float:right; 
} 

.contact-submit { 
    display: inline-block; 
    float:right; 
}

來源

2017-09-05 18:51:16 Brian

使用display顯示第二個div的空間：inline-block

回答

相關問題