Как не обернуть содержимое div?
189064 просмотра
6 ответа
У меня есть фиксированная ширина div
с двумя кнопками. Если метки кнопок слишком длинные, они переносятся - одна кнопка остается на первой строке, а следующая кнопка следует за ней, а не рядом с ней.
Как я могу заставить div
расширяться так, чтобы обе кнопки были на одной строке?
Ответы (6)
437 плюса
73 плюса
Комбинация обоих float: left;
white-space: nowrap;
работала для меня.
Каждый из них самостоятельно не достиг желаемого результата.
Автор: Chris Nolet Размещён: 10.08.2011 04:515 плюса
Я не знаю причины этого, но я установил для родительского контейнера значение для display:flex
дочерних контейнеров, display:inline-block
и они остались встроенными, несмотря на общую ширину дочерних элементов, превышающую родительскую.
Не нужно играть с max-width
, max-height
, white-space
или что - нибудь еще.
Надеюсь, что это помогает кому-то.
Автор: elPastor Размещён: 25.12.2017 03:454 плюса
Если вам не нужна минимальная ширина для div и вы действительно не хотите, чтобы div расширялся по всему контейнеру, вы можете перемещать его влево - плавающие div по умолчанию расширяются для поддержки их содержимого, например:
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
Автор: Nicholas Becker
Размещён: 09.11.2009 08:49
0 плюса
Если у вашего div фиксированная ширина, он не должен расширяться, потому что вы зафиксировали его ширину. Однако современные браузеры поддерживают min-width
свойство CSS.
Вы можете эмулировать свойство min-width в старых браузерах IE с помощью выражений CSS или с помощью автоматической ширины и наличия в контейнере объекта-спейсера. Это решение не элегантно, но может помочь:
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
Автор: Mr. Shiny and New 安宇
Размещён: 09.11.2009 08:02
-2 плюса
Если заставить кнопки оставаться в одной строке, они выйдут за пределы фиксированной ширины div, в котором они находятся. Если вы согласны с этим, то вы можете сделать еще один div внутри уже существующего div. Новый div в свою очередь будет удерживать кнопки и иметь фиксированную ширину, но столько места, сколько нужно двум кнопкам в одной строке.
Вот пример:
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
Возможно, вы захотите рассмотреть свойство переполнения для фрагмента содержимого за пределами parentDiv
границы.
Удачи!
Автор: Zoid Размещён: 03.04.2014 01:29Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- html Как вы можете настроить номера в упорядоченном списке?
- html Прокрутка переполненных DIV с помощью JavaScript
- html Как поместить пробел перед текстом опции в элементе выбора HTML?
- html Есть ли HTML напротив <noscript>?
- html Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Создание закругленных углов с помощью CSS
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- css Create a variable in .CSS file for use within that .CSS file
- css Как разместить одно изображение поверх другого в HTML?
- css Как я могу отобразить только часть изображения в HTML / CSS?
- css Удалите все классы, начинающиеся с определенной строки.