HTML在一行中显示2个项目，具有固定宽度而不会中断

Question

我的问题可能很简单，但我没有让它发挥作用。我希望在一行中有2个输入。所以我们假设我们将它放在div中并给这个div宽度为20％。现在两个输入将计算大小，并将每个50％。问题是div会设置一个休息时间。如果我把它们放在一个不会插入断点的范围内，那么我就不能给它一个宽度。

我希望“Plz / Ort”之后的输入总体大小为20％。

<label class="Label" for="City">Plz/ Ort*</label>
<span style="margin-left: 9.7%; width: 20%; display: flex-box; white-space:nowrap;">
  <input ng-model="user.plz" type="number" id="City"> -
  <input ng-model="user.city" type="text" id="City">
</span>

如果我将其更改为此，那么它仍然是相同的。

<label class="Label" for="City">Plz/ Ort*</label>
<div style="margin-left: 9.7%; width: 20%; display: inline-block; white-space:nowrap;">
  <input ng-model="user.plz" type="number" id="City"> -
  <input ng-model="user.city" type="text" id="City">
</div>

有了跨度，我无法给它们宽度。

Answer 1

将显示更改为内联块 使用div而不是span

<label class="Label" for="City">Plz/ Ort*</label>
    <div style="margin-left: 9.7%; width: 20%; display: inline-block; white-space:nowrap;">
      <input ng-model="user.plz" type="number" id="City"> -
      <input ng-model="user.city" type="text" id="City">
    </div>

Answer 2

继续尝试使用flexbox：

<强> HTML

<label class="Label" for="City">Plz/ Ort*</label>
<span>
    <input ng-model="user.plz" type="number" id="City">
    <span>-</span>
    <input ng-model="user.city" type="text" id="City">
</span>

<强> CSS

label + span {
   margin-left: 9.7%;
   width: 20%;
   display: inline-flex; /* adjusted */
   white-space: nowrap;
 }

input { flex: 0 0 45%; } /* width adjusted for dash character */

DEMO

Answer 3

尝试使用<div>而不是span。您可以设置<div>元素的宽度。