Плавающий элемент уровня блока:нужно ли устанавливать ширину, если да, то как?
https://stackoverflow.com/questions/406504
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Допустим, у меня есть текстовые поля, выпадающие списки и кнопки отправки.Все они являются встроенными элементами.Это означает, что "официально" свойства margin, padding, width и height следует игнорировать (на практике это не совсем так).Если бы я хотел выбрать правильный путь для установки высоты кнопки, я бы написал что-то вроде display:block, а затем определил высоту.Но есть соображения, что элемент уровня блока неожиданно расширится сам по себе, поэтому я бы лучше установил его ширину на некоторое фиксированное значение.Проблема в том, что я не знаю ее ширины, так как она может быть динамически определена по тексту кнопки.
Другой сценарий:Я хочу создать меню с помощью <ul> и <li>.Я хочу, чтобы он был выровнен по горизонтали, с некоторыми элементами, сгруппированными слева, и с несколькими растянутыми вправо.И то , и другое <ul> и <li> являются элементами уровня блока.Поскольку я хочу, чтобы мое меню занимало все доступное горизонтальное пространство, а затем играло с высотой элементов и чтобы пункты меню были сдвинуты в обе стороны, блочный режим мне подходит.Я просто буду использовать float: left и float: right для достижения поставленной задачи.Но опять же, использование должно как бы устанавливать ширину для элементов меню, поскольку они являются блочными элементами.Я не знаю их ширины, потому что текст элементов может отличаться.Но кажется, что все и так отображается просто отлично.
Я не заметил никаких проблем с обоими встроенными элементами, принудительно отображаемыми как блочные элементы без перемещения или установки ширины, или с примером элемента списка.Это прекрасно работает в IE7, FF3, Opera 9 и Safari, независимо от текущей версии.Этот вопрос остается открытым:должен ли я беспокоиться об этих встроенных в блок элементах или реальных блочных элементах, размещенных, но без заданной ширины, или просто оставить все как есть?Я что-то упускаю из виду или это просто еще одна из тех вещей, которые вы просто не должны ожидать получить правильно?
Решение
Допустим, у меня есть текстовые поля, выпадающие списки и кнопки отправки.Все они являются встроенными элементами.Это означает, что "официально" свойства margin, padding, width и height следует игнорировать (на практике это не совсем так).Если бы я выбрал правильный путь для установки высоты кнопки, я бы написал что-то вроде display: block, а затем определите высоту.Но есть соображения, что элемент уровня блока будет расширяться сам неожиданно, поэтому я бы лучше установил для его ширины некоторое фиксированное значение.Проблема в том, что я не знаю ее ширины, поскольку она может быть динамически определена по тексту кнопки.
Если только вы не имеете в виду Особенности коробочной модели Internet Explorer, Таким образом, вам не следует беспокоиться о том, что что-то неожиданно расширяется или сжимается.До тех пор, пока ты заботишься о нормализация для вариаций браузера, с тобой все будет в порядке.Если на пути к славе дизайна у вас возникает неожиданный и нежелательный побочный эффект, вы отлаживаете его, поскольку это ошибка программиста, с которой вы боретесь.CSS может быть необычным, но в 95% случаев для большинства основных браузеров это не является подходящим оправданием.Об остальных 5% мы не говорим.
Вот как я понимаю вашу проблему:
Вы хотите, чтобы меню с плавающей <li> таким образом, у вас есть горизонтальное меню, которое охватывает ширину области просмотра (то, что ваш пользователь видит "в окне браузера"), чтобы оно всегда было полной шириной области просмотра.
Звучит так, будто вы мыслите в терминах дизайна фиксированной ширины, тогда как на самом деле то, что звучит так, будто это соответствовало бы вашим целям, - это дизайн плавной ширины.Это означает, что вы создаете "эластичный" дизайн, который расширяется и сжимается относительно размера окна браузера пользователя.Если вы создавали свой дизайн, предполагая, что ширина пикселя будет установлена для каждого элемента, вы, вероятно, сможете найти элегантный способ сохранить плавную ширину заголовка и навигации, но при этом иметь фиксированную ширину основной области содержимого.Вы можете найти золотую середину и без полного редизайна. Это пошаговое руководство, скорее всего, будет тем, что вы ищете. Хороший объяснение терминов "фиксированная ширина" и "текучая ширина" можно найти здесь, если вы не знакомы с этим жаргоном и хотите поближе познакомиться с этими идеями.
Еще один на дорожку:
Установка ширины для всех плавающих элементов не только рекомендуется, но и является частью стандарта CSS2 в соответствии с W3C.
- Анджелина
Другие советы
Если мы примем "Официальную" линию, которую вы упомянули, то жизнь станет проще, поскольку нам не нужно беспокоиться о ширине, высоте и так далее для этих элементов.
Не думайте, что пиксель идеален, не беспокойтесь о мелочах представления, следуйте стандартам, разрешайте браузеру и его пользователям определять стили...
(если бы только это действительно было так прямолинейно в "неофициальном" реальном мире)
Хорошо, я полагаю, мой вопрос был понят неправильно.Что произойдет, если я не задам ширину для плавающих блоков?Я не могу это установить, я этого не знаю.потому что это зависит от содержания.Будут ли все поля просто уменьшаться до ширины их содержимого?Вот как это работает на практике.И я этим доволен.Есть ли какое-либо официальное подтверждение того, что такого поведения следует ожидать?
Добавлено:Я нашел здесь кое-что интересное: http://www.webmasterworld.com/css/3811603.htm
Я предлагаю проверить рекомендации для более технического объяснения различий, но, проще говоря, поведение поплавков изменилось между css2 (1998) и css2.1 (пара месяцев 2005, а затем 2007).В css2 было обязательным устанавливать ширину для поплавков, в то время как "термоусадочная упаковка", которую вы видите в ff3, - это css2.1.Это означает, что браузеры, выпущенные до июля 2007 года, соответствуют рекомендации, относящейся ко времени их выпуска, когда они растягивают div #container на всю ширину области просмотра.(Это не объясняет Opera, но она всегда делала свое дело.)
Если это так, то я согласен.Как я уже упоминал, это работает в текущих IE7, FF3, Opera 9 и Safari.
Еще какие-нибудь комментарии?
(предполагая, что я понимаю вашу проблему)
В большинстве случаев вам не нужно устанавливать ширину элементов списка.Но (да, здесь есть "но") если у вас есть ссылка с display: block (допустим, вы хотите использовать раздвижную дверь), вам нужно проделать небольшую хитрость:
html - код:
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
И CSS:
.menu li {
float:left
}
.menu li a {
display:block;
}
/* ===================== */
/* = and the IE6 trick = */
/* ===================== */
* html .menu li a {
width:1%;
white-space:nowrap;
}
Если вы этого не сделаете, то ССЫЛКА будет распространена на всех родительских пользователей.ССЫЛКА, а не элемент СПИСКА ;) Таким образом, вы устанавливаете "минимальную ширину" в IE6, и у вас не возникнет никаких других проблем.
