Вытянуть блоки с селектами по горизонту, как вытянуть?

Question

[Антон Вебсайтовский]

Здравствуйте, сделал блок длинной 1050px в него входят блоки с селектом, выбор вариантов, делаю фильтр поиска на знакомства, есть проблема, как вытянуть все блоки, чтобы они автоматически заполняли пустое пространство по всей длине, а это 1050px.

Залил сюда код: https://jsfiddle.net/7yam8psh/
Там видно белый фон, его длина 1050px он по центру, в нем блоки с селектами.

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

Хочу сделать так:

Answer 1

[Wheelie]

https://jsfiddle.net/85sgun9c/

Так?

Comments

[Антон Вебсайтовский]

Спасибо, но не так. вы чере маргин сделали, а блоки с селектом разные длиной.

Answer 2

[Денис Инешин]

1. Если каждый селект в отдельности у вас резиновый и тянется на всю доступную ширину, то это просто
2. Создаем таблицу с 6 ячейками или используем flexbox
3. Помещаем каждый селект в свою ячейку
4. Done

https://jsfiddle.net/IonDen/6vjbkqmf/

Comments

[Антон Вебсайтовский]

как это сделать, сделайте пример пожалуйста.

[Денис Инешин]

Антон Вебсайтовский: грубо говоря вот так: https://jsfiddle.net/IonDen/6vjbkqmf/

[Антон Вебсайтовский]

Денис Инешин: попробую ! спасибо

Answer 3

[Zhainar]

Не бейте)
https://jsfiddle.net/7yam8psh/5/

Answer 4

[Михаил Чирский]

Самый простой способ, сделать на Flex, будет и тянутся, и растояния везде будут одинаковые, ну можно и по старинке, взять 6 блоков, если память не изменяет, 6 блоков это 16.6666%.

Comments

[Антон Вебсайтовский]

А как это? по подробнее, пример бы.

[Михаил Чирский]

Антон Вебсайтовский: В вашем случае можно сделать так: https://jsfiddle.net/7yam8psh/6/

Ну это прокатит со статической версткой, если хотите чтобы все тянулось, надо переверстывать ваши блоки.

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

А как сделать чтобы растягивался блок сам весь с селектом ! а не пространство свободное ! а то выходит что блоки растягиваются на всю длинну ! с помощью пустого пространства.

в ie последней версии, вот что еще мешает, как убрать то? там красным крастиком пометил.
s017.radikal.ru/i431/1602/12/8dc063623ee3.jpg

[Михаил Чирский]

Антон Вебсайтовский: Я же говорил, переверстать блоки, чтобы он были резиновые 16.6666% в вашем случае, и с помощью Flex растягивать select относительно самого блока

[Антон Вебсайтовский]

по подробнее как это сделать то ! я ваши стили применил что вы сделали.

[Антон Вебсайтовский]

сам блок сделал так:
.glbacktel{
width: 16.6666%;
margin-bottom: 20px;
display: inline-block;
height: 38px;
line-height: 38px;
border: 2px solid #C0C0C0;
background-color:#FFFFFF;
transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
transition-property: color, background, border;
transition-duration: 200ms;
transition-timing-function: linear, linear, linear;
transition-delay: 0ms, 0ms, 0ms;
}

в селект добавил так

.glbacktelinp select{
height: 100%;
display: flex;
background-color: #ffffff;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
border: none;
text-transform: none;
color:#666666;
}

[Антон Вебсайтовский]

.glbacktelinp select{ убрал display: inline-block;

Чет не то вышло все кривое.

[Антон Вебсайтовский]

Блоки стали одинаковой длиной ! блоки разные длины, так как селект везде разный длины ! селект растягивается исходя из того какое слово в нем самое длинное написано ! а там вышло щас непонятно что.

[Михаил Чирский]

Антон Вебсайтовский: я вам в качестве примера привел, мой код не нужно применять, нужно понять как он работает, и сделать самому, готовое решение давать никто не будет, иначе вы не научитесь

[Антон Вебсайтовский]

Михаил Чирский: Сделал, но есть проблема, селект не растягивается.

[Антон Вебсайтовский]

вот что сделал https://jsfiddle.net/32L67g6q/

[Михаил Чирский]

Антон Вебсайтовский: Я вам уже ответил, что надо переверстать, легче всего это сделать на Flex, ну нужно минимальное понимание, того что вы делаете, а у вас его я вижу не хватает, и если исп. % не нужно делать margin в px, в вашем случае прокатило, ну в любом другом варианте, все сломается, учитесь правильно верстать сразу, потому исправятся будет сложнее, я вам дал намек куда копать, делать я за вас не буду.