爲什麼我的按鈕偏離中心？

enter image description here

的按鈕不是垂直相互對齊，因爲他們應該的。

這裏是我的HTML代碼：

  <div class="incorrect-guesses"> 
       <h4>Incorrect Guesses</h4> 
       <div class="incorrect-guess">A</div> 
       <div class="incorrect-guess">A</div> 
       <div class="incorrect-guess">A</div> 
       <div class="incorrect-guess">A</div> 
       <div class="empty-guess"></div> 
       <div class="empty-guess"></div> 
       <div class="empty-guess"></div> 
       <div class="empty-guess"></div> 
      </div>

而CSS作用於他們：

.empty-guess { 
    display: inline-block; 
    width: 38px; 
    height: 38px; 
    margin: 0 3px 6px 0; 

    border: 1px solid #ccc; 
} 

.incorrect-guess { 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    margin: 0 3px 6px 0; 

    background: #e32a3c; 
    color: #fff; 
    line-height: 2.5em; 
    text-align: center; 
    text-decoration: none; 
}

我用網上督察一噸的時候，看看是否有任何的推動，他們除了說方式，但似乎沒有什麼是我可以在網絡督察檢測。

來源

2013-02-17 Doug Smith

的jsfiddle例子？ – 2013-02-17 00:20:36

看起來像你的'h4'標籤正在推倒他們。 – 2013-02-17 00:21:18

只需將vertical-align: bottom添加到emtpy元素即可。

http://jsfiddle.net/G3Kky/

來源

2013-02-17 00:21:46

這工作，但爲什麼？ O_o – 2013-02-17 01:13:49

老實說，我不是100％肯定的，但'垂直對齊'確保所有元素都垂直對齊，儘管他們的盒子模型 – 2013-02-17 01:15:32

哈哈，夠公平，我只是好奇它爲什麼沒有首先不起作用。：P – 2013-02-17 01:20:12

什麼爆丸說，或使用上的所有元素：

display: block; 
float: left;

來源

2013-02-17 00:26:16

要快速解決這個惱人的問題是float的div到left。所有其他CSS可以保持不變。

.empty-guess, .incorrect-guess { 
    float: left; 
}

這是結果：

Fixed image with float:left

JS Fiddle Example

來源

2013-02-17 00:50:23 JSW189

爲什麼我的按鈕偏離中心？

回答

相關問題