Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

Answer 2

试试这个替换bellow css：

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

}

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

2 个答案: