W3.CSS - 更小的選擇輸入恰好2位數寬

Question

我使用w3.css，我有一個日期輸入如下所示：

<div class="w3-padding w3-light-grey w3-border w3-border-black w3-left-align"> 
    <span style="white-space:nowrap"> 
     Date (yyyy/mm/dd): 
     <select class="w3-select w3-border w3-hover-yellow"></select>/ 
     <select class="w3-select w3-border w3-hover-yellow"></select>/ 
     <select class="w3-select w3-border w3-hover-yellow"></select> 
    </span> 
</div> 

發生的是（與所有w3.css輸入字段）的第一個選擇框（年）佔據了包含div的全部寬度，其他人則在右側溢出。

我想要的是一個整潔的緊湊單元，其中每個選擇最多4位數（全年）和2位寬（月和日）。我希望在所有的手機和臺式機上都能這樣做。

另外，一般來說，當我不想要w3.css輸入佔用包含div的全部寬度時，我該怎麼辦？

Answer 1

經過大量的閱讀，我有一個似乎工作的解決方案。希望這可以幫助其他人誰需要做同樣的事情：

<div class="w3-padding w3-light-grey w3-border w3-border-black w3-left-align"> 
    <span style="white-space:nowrap"> 
     Date (yyyy/mm/dd): 
     <select class="w3-select w3-border w3-hover-yellow" style="display: inline-block; width: auto;"></select>/ 
     <select class="w3-select w3-border w3-hover-yellow" style="display: inline-block; width: auto;"></select>/ 
     <select class="w3-select w3-border w3-hover-yellow" style="display: inline-block; width: auto;"></select> 
    </span> 
</div> 

基本上你需要在此改變w3-select的風格的顯示和寬度元素：

style="display: inline-block; width: auto;"