Мой вопрос может быть простым, но я не могу заставить его работать. Я хочу иметь 2 входа в одну строку. Допустим, мы помещаем его в div и придаем этому div ширину 20%. Теперь два входа рассчитают размер и будут составлять 50% каждый. Проблема в том, что div установит перерыв. Если я помещу их в промежуток, который не будет вставлять разрыв, я не смогу задать ему ширину.

enter image description here

Я хочу, чтобы исходные данные после "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>

С размахом я не могу дать им ширину.

1
Tom el Safadi 24 Дек 2015 в 00:58

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

ДЕМО

1
Michael Benjamin 23 Дек 2015 в 22:20

Попробуйте использовать <div> вместо диапазона. Вы можете установить ширину элементов <div>.

0
haakon.io 23 Дек 2015 в 22:03

Измените отображение на встроенный блок Используйте div вместо диапазона

<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>
1
LucaLumetti 23 Дек 2015 в 22:04