Я пытаюсь сделать заголовок h2 для виджетов боковых панелей, но хочу, чтобы ширина div-класса была любой шириной содержимого. Кажется, я не могу просто установить ширину, потому что те заголовки с более длинным контентом, а затем более короткий контент заставляют его сломаться.
Как я могу просто растянуть/изменить ширину в зависимости от длины содержимого? Любая помощь будет принята с благодарностью.
Насколько я знаю, display: inline-block - это то, что вам, вероятно, нужно. Это сделает его похожим на него, но все же позволит вам использовать такие вещи, как поля и т.д.
Если display: inline; не работает, попробуйте display: inline-block;.:)
h2 { display: inline }
Лучший способ сделать это - установить display: inline;. Обратите внимание, однако, что во встроенном дисплее вы теряете доступ к некоторым свойствам макета, таким как высота ручек и вертикальные поля, но это не кажется проблемой для вашей страницы.
попробуйте использовать position: absolute;
попробуй использовать display: inline-flex. Подробнее о работе с flexbox: руководство по flexbox
Если вы приедете сюда, существует высокая вероятность width: min-content или width: max-content может решить вашу проблему. Это может заставить элемент использовать наименьшее или наибольшее пространство, которое может выбрать браузер...
Это современное решение. Вот небольшой урок для этого.
Существует также fit-content, который часто работает как min-content, но более гибкий. (Но также имеет худшую поддержку браузера.)
Это довольно новая функция, и некоторые браузеры еще не поддерживают ее, но поддержка браузеров растет. Смотрите текущее состояние браузера здесь.
Правильный способ сделать это - использовать вместо этого тег.
являются блоками... являются встроенными. Это то, для чего они предназначены.
Также реагируйте на теги. Вы не можете выполнить действие (поместить a) в div, но вы можете действовать...
Надеюсь, что это поможет.