Предоставить поле выбора, заполненное значком рядом

У меня есть поле выбора и значок внутри контейнера, например:

<div class = "container">
  <select name = "select" style = "width:100%">
  <option>Girl</option>
  <option>Boy</option>
  </select>
  <i class = "fa fa-star"></i>
</div>

Я хочу, чтобы поле выбора имело полную ширину контейнера за вычетом длины значка, чтобы они располагались рядом друг с другом.

Я думал об измерении ширины значка в пикселях и установке его как margin-right в поле выбора. Но, похоже, это не работает с width:100%, и я также не уверен, будет ли ширина значка в пикселях одинаковой на всех устройствах.

Как я могу максимально расширить поле выбора, находясь на одной строке со значком?

Вот jFiddle.

html css

14.08.2018 17:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Для этого вы можете использовать Flexbox. Вы можете назначить родительский контейнер для отображения как flexbox с помощью display:flex;. Кроме того, вы можете использовать свойство css flex, которое является сокращением для flex-grow, flex-shrink и flex-basis вместе взятых. Установка этого значения на 1 указывает элементу использовать все «пустые» горизонтальные интервалы.

.container {
  display: flex;
}

select{
  flex: 1;
}

i{
  font-size: 1em;
}

.container {
  display: flex;
}

select{
  flex: 1;
}

i{
  font-size: 1em;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" />
<div class = "container">
  <select name = "select">
    <option>Girl</option>
    <option>Boy</option>
  </select>
  <i class = "fa fa-star"></i>
</div>

Вы можете найти дополнительную информацию о flexbox здесь

что делает select{ flex: 1; }?

— 14.08.2018 17:09

14.08.2018 17:07

Flexbox

.container {
  border: 1px solid;
  display: flex;
}

select {
  flex: 1; /* be as wide as possible */
}

i {
  font-size: 1em;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" />
<div class = "container">
  <select name = "select">
    <option>Girl</option>
    <option>Boy</option>
  </select>
  <i class = "fa fa-star"></i>
</div>

CSS-сетка

.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 1fr auto;
  /* first column will be as wide as possible */
}

i {
  font-size: 1em;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" />
<div class = "container">
  <select name = "select">
    <option>Girl</option>
    <option>Boy</option>
  </select>
  <i class = "fa fa-star"></i>
</div>

14.08.2018 17:07

Использование гибкого макета может решить вашу проблему, проверьте следующий код:

<style>
  .container {
      border:1px solid;
      display:flex;
      flex-direction:row;
  }
  select{
    width: 100%;  
  }
  i{
    font-size: 1em;
  }
</style>
<div class = "container">
  <select name = "select">
  <option>Girl</option>
  <option>Boy</option>
  </select>
  <i class = "fa fa-star">icon</i>
</div>

Также дополнительные требования, проверьте эту ссылку: https://www.w3schools.com/css/css3_flexbox.asp

14.08.2018 17:16