W3.CSS

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 输入字段一样）第一个 select 框（年份）占据了包含 div 的整个宽度，其他的溢出在右边。

我想要的是一个整洁紧凑的单元，其中每个 select 最多 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;"

W3.CSS - 更小 Select 输入恰好 2 位数宽

W3.CSS - Smaller Select Input exactly 2 digits wide

css