1

Друзья, ситуация след. Есть форма. В ней есть 3 инпута и кнопка. Все элементы размещены в 1 ряд. Я хочу, что бы кнопка имела фиксированную длину, а инпуты растягивались по оставшейся доступной ширине.

Весь код я представил в codepen. Помогите пожалуйста решить проблему

Codepen

<div class="booking-form d-inline-block">
                    <h4>Бронирование номеров</h4>
                    <div class="form-fields">

                        <div class="input-field-group">
                            <div>
                                <span class="input-field-alt">Дата заезда</span>
                                <input type="text" class="booking-input" placeholder="Дата заезда"/>
                            </div>
                            <span><i class="fal fa-calendar-alt input-icon"></i></span>
                        </div>

                        <div class="input-field-group">
                            <div>
                                <span class="input-field-alt">Дата выезда</span>
                                <input type="text" class="booking-input" placeholder="Дата выезда"/>
                            </div>
                            <span><i class="fal fa-calendar-alt input-icon"></i></span>
                        </div>

                        <div class="input-field-group">
                            <div>
                                <span class="input-field-alt">Гости</span>
                                <input type="text" class="booking-input" placeholder="Гости"/>
                            </div>
                            <span><i class="fal fa-user-astronaut input-icon"></i></span>
                        </div>

                        <div class="action-button">Найти номер</div>

                    </div>
                </div>


.booking-form
    width: 716px
    height: 144px
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.07)
    background-color: #fff
    border-radius: 16px
    padding: 32px

    h4
        text-align: left
        width: 190px
        font-weight: 500
        line-height: 18px
        font-size: 18px
        color: #3A3A41

    .form-fields
        display: flex

.input-field-group
    width: auto
    padding: 4px 8px
    height: 32px
    background: #FFFFFF
    border: 1px solid rgba(185, 195, 203, 0.3)
    box-sizing: border-box
    border-radius: 8px
    text-align: left
    display: flex
    margin-right: 16px


    .input-field-alt
        font-size: 8px
        color: #B9C3CB
        display: block

    .booking-input
        height: 12px
        background-color: gray
        border: 0

    .input-icon
        font-size: 14px
        color: #B9C3CB
        margin-left: 8px

.action-button
    width: 136px
    height: 32px
    background: linear-gradient(103.15deg, #0584A6 0%, #3386C6 100%)

2 ответа 2

3

Немного код ревью:

  1. .form-fields должен быть не <div> а <form>
  2. .input-field-alt должен быть не <span> а <label>
  3. .action-button должен быть не <div> а <button type="submit">

Что качается вопроса, то для .action-button нужно указать свойство flex-shrink: 0;

1

Использовал свою разметку, но принцип тот же

* {
  box-sizing: border-box;
}
:focus{
  outline:none;
}
body {
  margin: 0;
}
.booking{
  padding:0 20px;
}
.booking__form {
  display: flex;
  align-items: normal;
}

.booking__item {
  display:inline-block;
  flex:1 1 auto; /*растягивает и сжимает флекс-элемент относительно его собственной ширины*/
  margin:0 10px 0 0;
  padding:0 7px;
  border:1px solid #ddd;
  border-radius:7px;
}
.booking__input{
  display:block;
  width:100%; /*растягиваем тексовое поле на всю ширину родителя*/
  border:none;
  min-width:0;
}
.booking__btn{
  width:130px;
  flex:0 0 auto; /*запрет сжатия и растягивания флекс-элемента*/
}
<div class="booking">
  <h4 class="booking__title">Бронирование номеров</h4>
  <form action="#" class="booking__form">
    <label class="booking__item">
      <span class="booking__label">Дата заезда</span>
      <input type="text" class="booking__input" >
    </label>
    <label class="booking__item">
      <span class="booking__label">Дата отбытия</span>
      <input type="text" class="booking__input" >
    </label>
    <label class="booking__item">
      <span class="booking__label">Гости</span>
      <input type="text" class="booking__input" >
    </label>
    <button class="booking__btn">Найти номер</button>
  </form>
</div>

1
  • По бэму прям все написали! Спасибо большое за разьяснение:)!
    – WhoIsDT
    5 июл 2018 в 15:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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