Как заполнить оставшуюся ширину элементом ввода, но без обёртки?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Деляю менюшку, наполнил ряд кнопками, между которыми расположил <select>, которым хочу заполнить оставшуюся ширину. Использую на родительском элементеdisplay: table; width: 100%;, на дочерних - display:table-cell;width:fit-content;, конкретно на <select> - width: 100%.

Проблема в том, что width: 100% на <div> (когда ставил эксперименты) заполняет оставшуюся ширину, но когда этот трюк попытался применить к <select> - элемент стал заполнять вообще всё, вытесняя остальное. Почему так происходит, и какими css-правилами добиться, чтобы ширина <select> вела себя нормально?

Есть хак - обернуть в , но мне это не подходит, потому что меню генерируется процедурно - а выделять во что-то отдельное - разводить мусор в проекте

Код с <div>, проблемой и хаком под спойлером

&lt;!DOCTYPE html&gt; &lt;html lang="ru" style="height:100%;"&gt; &lt;head&gt;     &lt;meta charset="utf-8"&gt;     &lt;title&gt;Полигон&lt;/title&gt;     &lt;!--     &lt;link href="stypes.css" rel="stylesheet"&gt;     &lt;script src="script.js"&gt;&lt;/script&gt;     --&gt;     &lt;!--&lt;script type="module" src="/static/vue.js"&gt;&lt;/script&gt;--&gt; &lt;style&gt; &lt;/style&gt; &lt;/head&gt; &lt;body style="height:100%;margin:0;"&gt;     &lt;div&gt;My fixed content&lt;/div&gt;     &lt;div&gt;         &lt;div style="width:fit-content;float:left;background-color:lightgray;"             &gt;setraw         &lt;/div&gt;         &lt;div             style="float:left;max-width:100%;background-color:lightyellow"             &gt;Select-remaining         &lt;/div&gt;         &lt;div             style="width:fit-content;float:left;background-color:lightblue"             &gt;vsplit         &lt;/div&gt;     &lt;/div&gt;     &lt;div style="display:table;width:100%;"&gt;         &lt;div style="display:table-cell;width:fit-content;background-color:lightgray;"             &gt;setraw         &lt;/div&gt;         &lt;div             style="display:table-cell;width:100%;background-color:lightyellow"             &gt;Select-remaining many1 many2 many3 many4 many5 many6 many7 many8         &lt;/div&gt;         &lt;div             style="display:table-cell;width:fit-content;background-color:lightblue"             &gt;vsplit         &lt;/div&gt;     &lt;/div&gt;      &lt;div style="display:table;width:100%;"&gt;         &lt;button style="display:table-cell;width:fit-content;background-color:lightgray;"             &gt;setraw         &lt;/button&gt;         &lt;select             style="display:table-cell;width:100%;background-color:lightyellow"         &gt;                 &lt;optgroup&gt;                     &lt;option&gt;Select-remaining&lt;/option&gt;                     &lt;option&gt;many1&lt;/option&gt;                     &lt;option&gt;many2&lt;/option&gt;                     &lt;option&gt;many3&lt;/option&gt;                 &lt;/optgroup&gt;         &lt;/select&gt;         &lt;button             style="display:table-cell;width:fit-content;background-color:lightblue"             &gt;vsplit         &lt;/button&gt;     &lt;/div&gt;      &lt;div style="display:table;width:100%;"&gt;         &lt;button style="display:table-cell;width:fit-content;background-color:lightgray;"             &gt;setraw         &lt;/button&gt;         &lt;span             style="display:table-cell;width:100%;background-color:lightyellow"             &gt;             &lt;select style="width:100%"&gt;                 &lt;optgroup&gt;                     &lt;option&gt;Select-remaining&lt;/option&gt;                     &lt;option&gt;many1&lt;/option&gt;                     &lt;option&gt;many2&lt;/option&gt;                     &lt;option&gt;many3&lt;/option&gt;                 &lt;/optgroup&gt;         &lt;/select&gt;         &lt;/span&gt;         &lt;button             style="display:table-cell;width:fit-content;background-color:lightblue"             &gt;vsplit         &lt;/button&gt;     &lt;/div&gt;  &lt;/body&gt; &lt;script&gt; &lt;/script&gt; &lt;/html&gt;

&lt;!DOCTYPE html&gt; &lt;html lang="ru" style="height:100%;"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Полигон&lt;/title&gt; &lt;!-- &lt;link href="stypes.css" rel="stylesheet"&gt; &lt;script src="script.js"&gt;&lt;/script&gt; --&gt; &lt;!--&lt;script type="module" src="/static/vue.js"&gt;&lt;/script&gt;--&gt; &lt;style&gt; &lt;/style&gt; &lt;/head&gt; &lt;body style="height:100%;margin:0;"&gt; &lt;div&gt;My fixed content&lt;/div&gt; &lt;div&gt; &lt;div style="width:fit-content;float:left;background-color:lightgray;" &gt;setraw &lt;/div&gt; &lt;div style="float:left;max-width:100%;background-color:lightyellow" &gt;Select-remaining &lt;/div&gt; &lt;div style="width:fit-content;float:left;background-color:lightblue" &gt;vsplit &lt;/div&gt; &lt;/div&gt; &lt;div style="display:table;width:100%;"&gt; &lt;div style="display:table-cell;width:fit-content;background-color:lightgray;" &gt;setraw &lt;/div&gt; &lt;div style="display:table-cell;width:100%;background-color:lightyellow" &gt;Select-remaining many1 many2 many3 many4 many5 many6 many7 many8 &lt;/div&gt; &lt;div style="display:table-cell;width:fit-content;background-color:lightblue" &gt;vsplit &lt;/div&gt; &lt;/div&gt; &lt;div style="display:table;width:100%;"&gt; &lt;button style="display:table-cell;width:fit-content;background-color:lightgray;" &gt;setraw &lt;/button&gt; &lt;select style="display:table-cell;width:100%;background-color:lightyellow" &gt; &lt;optgroup&gt; &lt;option&gt;Select-remaining&lt;/option&gt; &lt;option&gt;many1&lt;/option&gt; &lt;option&gt;many2&lt;/option&gt; &lt;option&gt;many3&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt; &lt;button style="display:table-cell;width:fit-content;background-color:lightblue" &gt;vsplit &lt;/button&gt; &lt;/div&gt; &lt;div style="display:table;width:100%;"&gt; &lt;button style="display:table-cell;width:fit-content;background-color:lightgray;" &gt;setraw &lt;/button&gt; &lt;span style="display:table-cell;width:100%;background-color:lightyellow" &gt; &lt;select style="width:100%"&gt; &lt;optgroup&gt; &lt;option&gt;Select-remaining&lt;/option&gt; &lt;option&gt;many1&lt;/option&gt; &lt;option&gt;many2&lt;/option&gt; &lt;option&gt;many3&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt; &lt;/span&gt; &lt;button style="display:table-cell;width:fit-content;background-color:lightblue" &gt;vsplit &lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; &lt;/script&gt; &lt;/html&gt;

Дополнительно:

float? table? это случайно не для почты вёрстка? во всём остальном давно уже работает display: flex на контейнер и flex-grow: 1 для нужного ребёнка

  • IvanU7n, Нет, просто нужна была фиксированная ширина для всего, кроме . Да, это поведение действительно табличное: всё пространство, но не больше доступного. float был попыткой, он не решает задачу. После комментария увидел, что flex поддерживает fit-content, и, насколько вижу, решает задачу, спасибо!
  • IvanU7n, Казалось, что flex не умеет в fit-content и фиксированные длины, по-настоящему 'гнущийся' (flex) интерфейс здесь был совсем не к месту

    • IvanU7n в комментарии подсказал, что flex умеет всё, что нужно, и на рендеринге это похоже на правду. Там есть те же fill-content и flex-grow:1 (вместо width: 100%), просто в отличие от table-cell это работает даже на <select>

    Ответ

    &lt;!DOCTYPE html&gt; &lt;html lang="ru" style="height:100%;"&gt; &lt;head&gt;     &lt;meta charset="utf-8"&gt;     &lt;title&gt;Полигон&lt;/title&gt;     &lt;!--     &lt;link href="stypes.css" rel="stylesheet"&gt;     &lt;script src="script.js"&gt;&lt;/script&gt;     --&gt;     &lt;!--&lt;script type="module" src="/static/vue.js"&gt;&lt;/script&gt;--&gt; &lt;style&gt; &lt;/style&gt; &lt;/head&gt; &lt;body style="height:100%;margin:0;"&gt;     &lt;div style="display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;"&gt;         &lt;button style="flex:0 1 fit-content;background-color:lightgray;"             &gt;setraw         &lt;/button&gt;         &lt;select             style="flex-grow:1;background-color:lightyellow"         &gt;                 &lt;optgroup&gt;                     &lt;option&gt;Select-remaining&lt;/option&gt;                     &lt;option&gt;many1&lt;/option&gt;                     &lt;option&gt;many2&lt;/option&gt;                     &lt;option&gt;many3&lt;/option&gt;                 &lt;/optgroup&gt;         &lt;/select&gt;         &lt;button             style="flex:0 1 fit-content;background-color:lightblue"             &gt;vsplit         &lt;/button&gt;     &lt;/div&gt; &lt;/body&gt; &lt;script&gt; &lt;/script&gt; &lt;/html&gt;

    &lt;!DOCTYPE html&gt; &lt;html lang="ru" style="height:100%;"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Полигон&lt;/title&gt; &lt;!-- &lt;link href="stypes.css" rel="stylesheet"&gt; &lt;script src="script.js"&gt;&lt;/script&gt; --&gt; &lt;!--&lt;script type="module" src="/static/vue.js"&gt;&lt;/script&gt;--&gt; &lt;style&gt; &lt;/style&gt; &lt;/head&gt; &lt;body style="height:100%;margin:0;"&gt; &lt;div style="display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;"&gt; &lt;button style="flex:0 1 fit-content;background-color:lightgray;" &gt;setraw &lt;/button&gt; &lt;select style="flex-grow:1;background-color:lightyellow" &gt; &lt;optgroup&gt; &lt;option&gt;Select-remaining&lt;/option&gt; &lt;option&gt;many1&lt;/option&gt; &lt;option&gt;many2&lt;/option&gt; &lt;option&gt;many3&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt; &lt;button style="flex:0 1 fit-content;background-color:lightblue" &gt;vsplit &lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; &lt;/script&gt; &lt;/html&gt;

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Артём Dev Ответ

    Для заполнения оставшейся ширины элемента ввода без обёртки можно использовать свойство CSS `flex-grow`.

    Прежде всего, у вас должен быть контейнер, в котором находится элемент ввода. Например, это может быть `

    `. Далее, вы можете использовать следующий CSS для элемента ввода:

    <div>
 
</div>

    <div> </div>

    В данном примере мы создали `

    ` с `display: flex;`, что позволяет элементам внутри него занимать доступное пространство на экране. Затем, установили стиль `flex-grow: 1;` для элемента ввода ``. Это свойство указывает браузеру распределить доступное пространство между всеми элементами внутри контейнера с учётом их ширины.

    Таким образом, элемент ввода будет заполнять всю доступную ширину контейнера, не требуя дополнительной обёртки. Этот метод позволяет создавать гибкие и адаптивные макеты без лишних элементов в HTML.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов code-review Нужен ли код-ревью React/TypeScript проекта? 0 ответов