0

Всем привет, как сделать блок кнопок который будет склеен между собой, то есть все кнопки должны быть в одном блоке и быть склеены между собой, но при мобильной версии они должны становиться выпадающим списком, как на фото?

<!-- <div class="check-buttons">
    <ul class="f-list">
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Активные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">На проверке</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Пересчитанные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Завершенные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Отмененные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Все</label>
        </li>

    </ul>


 </div>
 <select name="orders" id="orders_statuses" style="position: relative;">
<option value="active">Активные заявки</option>    
<option value="checking_option">Заявки на проверке</option>
<option value="reaclculation_option">Пересчитанные заявки</option>
<option value="finished">Заверщенные заявки</option>
<option value="canceled">Отмененные заявки</option>
<option value="all">Все заявки</option>
 </select> -->

введите сюда описание изображения

2
  • Что значит "склеен между собой"?
    – xydope
    23 авг 2021 в 9:26
  • то есть между кнопками нет разрывов
    – user438563
    23 авг 2021 в 9:37

1 ответ 1

3

Самый простой вариант - media-запросы.

/* Тут пишите свои стили*/

@media screen and (min-width: 320px) { /*Размер экрана на котором будет скрыть список*/
  .check-buttons {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .check-buttons {
    display: block;
  }
  #orders_statuses {
  display: none;
  }
}
 <div class="check-buttons">
    <ul class="f-list">
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Активные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">На проверке</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Пересчитанные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Завершенные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Отмененные</label>
        </li>
        <li>
            <input type="radio" class="radios" name="radios" value="active" checked>
            <label for="active">Все</label>
        </li>

    </ul>


 </div>
 <select name="orders" id="orders_statuses" style="position: relative;">
   <option value="active">Активные заявки</option>    
   <option value="checking_option">Заявки на проверке</option>
   <option value="reaclculation_option">Пересчитанные заявки</option>
   <option value="finished">Заверщенные заявки</option>
   <option value="canceled">Отмененные заявки</option>
   <option value="all">Все заявки</option>
 </select>

Проще говоря, при экране 320px мы убираем блок с инпутами, а при 1024 возвращаем.

Вот несколько документаций по media-запросам: Html-book, MDN

1
  • Спасибо, хороший вариант
    – user438563
    23 авг 2021 в 9:37

Ваш ответ

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

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