html - 像素完美 3 列连续选择元素

Question

如果 div 实现响应式 3 列没有问题，但在我的情况下它是 div，我在使用 <select> 实现像素完美的 3 列时遇到问题在一行内。

.row{
display:table;
   width:100%;
   background: #eee;
}
.slct{
    border:1px solid #000;
    display:table-cell;
    width:31%;
    margin: 0 2% 10px 0;
}

<div class="row">
                <select class="slct " id="ppax">
                    <option value="1">Date *</option>
                    <option value="2">3/3/2015</option>
                    <option value="2">4/3/2015</option>
                </select>
                
                <select class="slct " id="ppax">
                    <option value="1">Time *</option>
                    <option value="2">11:30 AM</option>
                    <option value="2">12:00 AM</option>
                    <option value="2">12:30 AM</option>
                </select>

                    <select class="slct " id="ppax">
                    <option value="1">1 pax</option>
                    <option value="2">2 pax</option>
                    <option value="3">3 pax</option>
                    <option value="4">4 pax</option>
                    <option value="5">5 pax</option>
                    <option value="5">6 pax</option>
                    <option value="5">7 pax</option>
                    <option value="5">8 pax</option>
                    <option value="5">9 pax</option>
                    <option value="5">10 pax</option>
                </select>
</div>

Answer 1

我不得不承认，这是一个艰难的过程。当你有一个定义的 parent 时，可以使用百分比。因为 body 没有也永远不会有固定的宽度或高度，所以在处理它时使用 vw 和 vh 会更容易。

下面是可以帮助您解决问题的 CSS:

body {
  margin: 0;
}

.row{
  display: block;
  width: 100vw;
  background: #eee;
}

.slct{
  padding: 0;
  margin: 0;
  border: 1px solid #000;
  display: inline-block;
  width: calc((100vw / 3 - 6px) - 2vw);
  width: -moz-calc((100vw / 3 - 6px) - 2vw);
  margin: 0 2vw 10px 0;
}