0

Как расположить два input горизонтально на одной линии по разные стороны родительского блока div независимо от его ширины, чтобы при неоходимости они сужались автоматически, а не переносились на след.строку? Чтобы один input был по левому краю, а второй по правому, друг против друга и между ними минимум 1rem отступ был.Вот html:

<div class="price_range">
  <input class="start_price">
  <input class="end_price">
</div>

Без javascript

2 ответа 2

2

Используйте display: flex Чтоб задать между ними отступ мин. 1rem для input прописать ширину надо

.price_range {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.start_price {
    width: 40%;
}

.end_price {
    width: 40%;
}
<div class="price_range">
  <input class="start_price">
  <input class="end_price">
</div>

1
  • Как вариант использовать width: calc(50% - "половина вашего отступа между блоками"px); для каждого input'а. Так input'ы будут резиновые, а отступ будет неизменный. Commented 9 окт. 2021 в 11:24
0

И плюс вариант с float, если вдруг flex не устраивает:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.price_range {
  overflow: hidden;
  border:1px solid orangered;
  padding: 5px;
}



.price_range input {
  float:left;
  width: 48%;
}

.price_range input+input {
  float:right
}
<div class="price_range">
  <input class="start_price">
  <input class="end_price">
</div>

ну еще такой вариант с table совсем на крайний случай:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.price_range {
  overflow: hidden;
  border:1px solid orangered;
  display: table;
  width: 100%;
  table-layout:fixed;
  
}

.price_range .form-group {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  padding: .5rem;
}

input {
  width: 100%;
}
<div class="price_range">
  <div class="form-group">
    <input class="start_price">
  </div>
  
  <div class="form-group">
    <input class="end_price">
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.