width 100% который расширяется по содержимому

210
05 февраля 2020, 04:30

Всем привет, верстаю шаблон, в нём есть "корневой div"(id:indexRootOut) который должен растягиваться на всю ширину экрана, внутри есть два div'a id:indexTopRow1 и id:indexTopRow2, div id:indexTopRow1 содержит три элемента : лого, поиск и две кнопки(вход и рега). При слишком узком экране, все элементы сжимаются до минимальной ширины(у id:indexRootOut min-width: 800px), а при широком экране - растягиваются до максимальной(у id:indexTopInn max-width: 1280px). Всё работает нормально когда экран достаточно широкий, но когда ширина экрана меньше минимальной(800px) то получается вот это :

Flex'ами пробовал, результат аналогичный, div id:indexTopUserMenuOut должен изменять свою ширину в зависимости от ширины кнопок(т.к. на разных языках длина слов "вход" и "рега" будет отличаться)

<!doctype html>
<html lang="ru">
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#c21616" />
<meta name="Description" content="">
<title></title>
</head>
<body>
<div id="indexRootOut">
<div id="indexRootInn">
<div id="indexTopOut" style="background-color: #c21616;">
<div id="indexTopInn">
<div id="indexTopRow1">
<div id="indexTopLogo"><a href=""></a></div><!--indexTopLogo/-->
<div id="indexTopFindOut">
<input id="indexTopFindHTMLInput" type="text" value="">
<div id="indexTopFindHTMLButt" class="HTMLButt indexTopButt">найти</div>
</div><!--indexTopFindOut/-->
<div id="indexTopUserMenuOut"><!--
--><div class="HTMLButt indexTopButt" style="border-radius: 25px 0px 0px 25px;">вход</div><!--
--><div class="HTMLButt indexTopButt" style="border-radius: 0px 25px 25px 0px; border-left-width: 0px;">регистрация</div>
</div><!--indexTopUserMenuOut/-->
</div><!--indexTopRow1/-->
<div style="height: 26px;"></div><!--delim-->
<div id="indexTopRow2">
<div id="indexTopMenuOut">
<div class="indexTopMenuElem indexTopMenuActElem"><a href="">Популярное</a><div>Популярное</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Все категории</a><div>Все категории</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
<div class="indexTopMenuElem"><a href="">Текст</a><div>Текст</div></div><!--/indexTopMenuElem-->
</div><!--indexTopMenuOut/-->
</div><!--indexTopRow2/-->
</div><!--indexTopInn/-->
</div><!--indexTopOut/-->


</div><!--indexRootInn/-->
</div><!--indexRootOut/-->
</body>
</html>

https://jsfiddle.net/apd4q5kc/2/

Answer 1
#indexTopFindOut {
    display: table-cell;
    position: relative;
    min-width: auto;
    padding-right: 30px;
}

https://jsfiddle.net/3c17ua9t/

READ ALSO
От куда эти отступы ? И как их убрать?
HTML

От куда эти отступы ? И как их убрать?

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

 189
Input type file js
HTML

Input type file js

При выборе определенного файла, содержимое тега input type="file" меняется на название этого файлаПодскажите, как с помощью JS(JQuery), заменить то, что...

 193
Как добавить форму заказа на сайт?
HTML

Как добавить форму заказа на сайт?

Итак, есть сайт https://uds-loyaltyru/, на нем есть кнопка "Подробнее об инструментах для бизнеса" И есть сайт-зеркало, и на нем тоже есть эта кнопка, но она...

 373
Как сверстать направленный вниз треугольный блок? [дубликат]
HTML

Как сверстать направленный вниз треугольный блок? [дубликат]

Подскажите пожалуйста как верстаются такие блоки?

 199