W3.CSS-较小的选择输入正好2位数宽

我使用的是

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>

日期（yyyy/mm/dd）：
/
/

发生的情况是（与所有

w3.css

输入字段一样），第一个选择框（年份）占据包含

div

的整个宽度，其他框则溢出到右侧

我想要的是一个整洁紧凑的单元，其中每个选择最多4位数宽（一年）和2位数宽（一个月和一天）。我想在所有的手机和台式机上使用这个

---

另外，一般来说，当我不希望

w3.css

输入占据包含div的整个宽度时，我该怎么办？

经过大量阅读，我有了一个似乎可行的解决方案。希望这能帮助其他需要做类似事情的人：

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

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