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

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

1 个答案: