多个输入字段在同一行对齐答案

【问题标题】：multiple input field align in the same row多个输入字段在同一行对齐
【发布时间】：2015-01-02 09:53:05
【问题描述】：

2 个输入的默认（任何样式）已经在同一行对齐，但我希望第二个字段的宽度固定，并且它们是响应式的。

input, select {
    width:100%;
}
select {
    width:100px;
    float:right;
}
}

<div class="rowWrap">
    <input type="datetime-local" class="datetime" name="datetime" value="" placeholder="Date - Time *" />
    <select class="pax">
        <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>
    </select>
</div>

【问题讨论】：

单行需要两个输入框

标签： html css input-field

【解决方案1】：

你的意思是，像下面这样？随着select 的宽度固定，您可以使用calc 使input 占用剩余空间。 box-sizing:border-box 确保尺寸保持符合预期。

input,
select {
  box-sizing: border-box;
  height: 20px;
}
input {
  width: calc(100% - 100px);
}
select {
  width: 100px;
  float: right;
}

<div class="rowWrap">
  <input type="datetime-local" class="datetime" name="datetime" value="" placeholder="Date - Time *" />
  <select class="pax">
    <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>
  </select>
</div>

【讨论】：

啊，不支持safari？

【解决方案2】：

试试下面的css替换：

input, select {
    width:80%;
    float: left;
}
select {
    width: 100px;float: left;

}

【讨论】：