跨度不隨着孩子的大小而增長

我想把兩個組件放在同一行，並且像這樣包裝它。我試圖儘可能保持這種可重用性，所以我試圖儘可能獲得解決方案的一般性問題。跨度不隨着孩子的大小而增長

HTML：

<div class="form-group"> 
    <span class="component-parent"> 
     <label for="driversLicense.num">Driver's License #</label> 
     <input type="text" class="form-control" id="driversLicense.num"></input> 
    </span> 
    <span class="component-parent"> 
     <label for="driversLicense.state">State</label> 
     <select id="driversLicense.state" class="form-control"></select> 
    </span> 
</div>

CSS：

label { 
    display: block; 
} 
.component-parent { 
    display: inline-block; 
} 
.form-control { 
    width: 100%; 
    padding: 6px 12px; 
}

寬度：100％是從引導繼承，如果我刪除它，它會導致各種問題與我的佈局的其餘部分。

問題是input在select的下面，我希望它們之間有一點點空間。如果我刪除width: 100%然後它看起來是正確的，如果我刪除我的填充，然後兩個組件接觸，他們之間沒有空間，但然後我的插入點是在錯誤的地方。

這是一個fiddle顯示的現象。

有沒有辦法改變將解決這個問題的form-group的CSS？如果需要，我可以添加額外的容器，但我寧願不更改component-parent元素或其子元素的CSS或html。

來源

2013-09-24 rancidfishbreath

我結束了加入兩個component-parent元素之間的新span。跨度有一個margin-left，它等於水平填充。

這是新fiddle

來源

2013-09-25 19:19:23 rancidfishbreath

這是一個與您正在應用於選擇的填充有關的問題！我加了

box-sizing:border-box;

其中解決了這個問題，但是你需要浮動跨度來清除間隙！

讓我知道你是否還有其他問題！：）祝一切順利！

DEMO http://jsfiddle.net/graHw/6/

來源

2013-09-24 19:09:44

這個答案給了我一些更多的Google服務條款，所以我了投票，但它改變了組件的父元素的一個的CSS。 – rancidfishbreath

很高興它可以是一些用途，我會嘗試去想一個不會的解決方案！ :) –

跨度不隨着孩子的大小而增長

回答

相關問題