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> 而不是跨度。您可以设置 <div> 个元素的宽度。

Answer 2

将显示更改为内联块使用 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 3

要继续尝试使用 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

HTML 在一行中以固定宽度不间断地显示 2 个项目

HTML display 2 items in one row with a fixed width without break

html

css

flexbox