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

Question

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>

Answer 1

你是说像下面这样的？ select 固定宽度后，您可以使用 calc 使 input 占据剩余的 space。 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>

Answer 2

试试这个替换波纹管 css :

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

}

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

multiple input field align in the same row

html

css

input-field