Плавающий элемент блочного уровня: нужно ли устанавливать ширину, если да, то как?

Question

Скажем, у меня есть текстовые поля, выпадающие списки и кнопки отправки. Все они встроенные элементы. Это означает, что «официально» свойства margin, padding, width и height следует игнорировать (на практике это не совсем так). Если бы мне нужно было правильно выбрать высоту для кнопки, я бы написал что-то вроде display: block, а затем определил высоту. Но есть соображения, что элемент блочного уровня неожиданно расширится, поэтому мне лучше установить его ширину на некоторое фиксированное значение. Проблема в том, что я не знаю его ширину, поскольку он может быть динамически определен по тексту кнопки.

Другой сценарий: я хочу создать меню через <ul> и <li>. Я хочу, чтобы он был выровнен по горизонтали, некоторые элементы были сгруппированы слева, а некоторые - вытянуты вправо. И <ul>, и <li> являются элементами уровня блока. Поскольку я хочу, чтобы мое меню занимало все доступное горизонтальное пространство, а затем играло с высотой элементов и чтобы элементы меню были сдвинуты в обе стороны, режим блочности мне подходит. Я просто использую float: left и float: right для выполнения задачи. Но, опять же, команда use должна установить ширину элементов меню, поскольку они являются блочными элементами. Я не знаю их ширины, потому что текст предметов может варьироваться. Но, похоже, все выглядит так, как есть.

Я не заметил каких-либо проблем, связанных с тем, что оба встроенных элемента принудительно отображались как блочные элементы без всплывающего или заданного значения ширины или с примером элемента списка. Он отлично работает в IE7, FF3, Opera 9 и Safari, независимо от текущей версии. Остается вопрос: следует ли мне беспокоиться о том, что эти встроенные в блок элементы или реальные блочные элементы всплывают, но без установленной ширины, или просто оставьте все как есть? Я что-то упустил или это просто еще одна из тех вещей, которые вы просто не должны ожидать, чтобы получить права?

Answer 1

Скажите, у меня есть текстовые поля, выпадающие списки и отправить кнопки. Они все инлайн-элементы. Который означает, что «официально» поля, отступы, ширина и высота свойства должны быть игнорируется (на практике не очень). Если я должны были пойти правильным путем, чтобы установить высота до кнопки я бы написал что-то вроде отображения: блок, а затем определить высоту. Но есть соображения, что уровень блока элемент будет расширяться неожиданно, поэтому я бы лучше установить его ширина до некоторого фиксированного значения. Эта проблема является то, что я не знаю его ширину с это может быть динамически определено на текст кнопки.

Если вы не имеете в виду причудливая модель Internet Explorer , вам не следует беспокоиться о неожиданном расширении или сокращении. Пока вы позаботитесь о нормализации для варианта браузера , все будет в порядке. Если у вас есть неожиданный и нежелательный побочный эффект на пути к созданию славы, вы отлаживаете его, так как это ошибка программиста, с которой вы сталкиваетесь. CSS может быть причудливым, но для большинства основных браузеров это не оправдывает 95% времени. Остальные 5%, о которых мы не говорим.

Вот как я понимаю вашу проблему:

Вы хотите, чтобы меню с плавающей точкой <li>, чтобы у вас было горизонтальное меню, которое охватывает ширину области просмотра (то, что ваш пользователь видит «в окне браузера»), чтобы она соответствовала всей ширине области просмотра.

Звучит так, будто вы думаете с точки зрения дизайна с фиксированной шириной, тогда как на самом деле то, что звучит так, как будто бы оно соответствует вашим целям, - это дизайн с жидкой шириной. Это означает, что вы создаете «эластичный» дизайн, который расширяется и сжимается относительно размера окна браузера пользователя. Если вы создали свой дизайн, предваряя ширину пикселей, устанавливаемую для каждого элемента, вы, вероятно, сможете найти элегантный способ поддерживать заголовок и навигацию с изменяющейся шириной, но иметь область основного содержимого фиксированной ширины. Вы можете найти счастливую среду без полного редизайна. Это пошаговое руководство, вероятно, будет тем, что вы ищете. Хорошее объяснение терминов фиксированная ширина и ширина жидкости можно найти здесь, если вы не знакомы с жаргоном и хочу поближе взглянуть на эти идеи.

Еще один для дороги:

Установка ширины для всех плавающих элементов не только рекомендуется, но является частью стандарта CSS2 согласно W3C.

• Angelina

Answer 2

(при условии, что я понимаю вашу проблему)

В большинстве случаев вам не нужно устанавливать ширину элементов списка. Но (да, здесь есть но), если у вас есть ссылка с 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, и у вас не будет никаких других проблем.

Answer 3

Хорошо, я полагаю, мой вопрос не был правильно понят. Что будет, если я не установлю ширину для всплывающих окон? Я не могу установить это, я не знаю это. потому что это зависит от содержания. Будут ли все ящики уменьшаться до ширины их содержимого? Вот как это работает на практике. И я доволен этим. Есть ли официальное подтверждение того, что такое поведение следует ожидать?

Добавлено: Я нашел здесь кое-что интересное: http://www.webmasterworld.com/css/3811603.htm

Я предлагаю проверить рекомендации для более технического объяснения различий, попросту говоря, поведение поплавков изменилось между css2 (1998) и css2.1 (пара месяцев 2005, а затем 2007). Согласно css2, было необходимо установить ширину для чисел с плавающей запятой, в то время как «сжатая упаковка», которую вы видите в ff3, это css2.1. Это означает, что браузеры, выпущенные до июля 2007 года, соответствуют рекомендации, относящейся к времени их производства, когда они растягивают контейнер div # на всю ширину области просмотра. (Что не объясняет Opera, но она всегда делала свое дело.)

Если так, то я утверждал. Как я уже упоминал, он работает в текущих версиях IE7, FF3, Opera 9 и Safari.

Есть еще комментарии?

Answer 4

Если мы примем «Официальную» линию, о которой вы упомянули, то жизнь станет проще, поскольку нам не нужно беспокоиться о ширине, высоте и включении этих элементов.

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

(если бы это было действительно так просто в "неофициальном" реальном мире)

Answer 5

Вы чувствуете себя немного переутомленным, я думаю:)

Проверьте эти ссылки , особенно 9.4, 9.5 и 10.3. И ctrl-f "inline-block"