Inline-block как замена float

[LastDragon]

> Странный способ с отсутствием закрывающего тега LI:

Только для тех кто не читал спецификацию HTML — для некоторых тегов закрывающий тег необязателен (к XHTML это не относится).

> Более подробно об этих способах можно прочитать в статье CSS-tricks.

habrahabr.ru/post/138501/
habrahabr.ru/post/137582/
(возможно еще что-то было)

[Softlink]

для некоторых тегов закрывающий тег необязателен

Этой «особенностью» я бы пользовался в самом последнем случае, ибо вот jsfiddle.net/Softlink/YYwsd/

[LastDragon]

А div к ним не относится :) (http://www.w3.org/TR/REC-html40/index/elements.html, для html5 не нашел сходу ссылку)

[Softlink]

Да, точно.
Но все равно, как-то не по себе от незакрытых тегов :)

[yurik417]

Крепитесь

[Softlink]

Раз уж тему подняли эту. Решил побаловаться немного.
По какому алгоритму закрываются дивы?
Вот одна ситуация jsfiddle.net/Softlink/4kybd/ див сам закрылся.
Вот вторая(производная от самого первого примера) jsfiddle.net/Softlink/6jRYy/
Вложенные дивы вложились друг в друга и закрылись тоже. Получается, встретив любой элемент, он «понимает», что закрываться прямо сейчас не надо и дальше по лесенке до последнего элемента? Так?

[StopDesign]

Посмотрел статистику. IE7 — 1.6%. Я бы тоже забил.

[hermit931]

инлайн-блок лучше смотрится в ІЕ7 чем в ІЕ6, но я согласен — пора забивать на 7мую версию. Хорошо что она легче сдается предыдущей версии )

[hermit931]

Флоат для сайдбара удобен тем, что если правильно все оформить, то убирая его, остальная часть контента будет автоматически на всю ширину.
Есть еще способ для списков

• one
• two
• three

Так же убираются пробелы, а запрограммировать такое мне кажется проще

[hermit931]

блин, редактор схавал код
[ul]<|--
-->[li]one[li]<|--
-->[li]two[li]<|--
-->[ul]

тоесть использовать коментарии

[Scrum]

Еще как способ расположить li элементы в одну строку [li]exampl1[/li][li]exampl[/li]

[hermit931]

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

[torbasow]

Для борьбы с промежутками можно использовать несколько техник.

В общем, хорошего способа нет.

[torbasow]

Переносы, Вы хотели сказать. Это плохой способ, вредящий читаемости кода.

[torbasow]

Во-от, а хочется хорошего способа, бескомпромиссного.

[VolCh]

Может мой понравится :)

[torbasow]

Не просто не понравится, а совершенно неприемлем. У меня всегда XHTML.

[torbasow]

Во-первых, аккуратности ради, во-вторых, XSLT.

[hermit931]

а вариант с комментариями не подходит? код остается вполне читабельным

[torbasow]

Ага, а потом кто-нибудь в затмении увидит пустые комментарии и на автомате поудаляет, как мусор. И работоспособность кода нарушится.

[hermit931]

А чего это кто-то должен удалять чужие строки? пусть свои удаляет :) Ну можно и комментарий оставить, что удалять ни-ни

[VolCh]

Не знаю как вы пользуетесь XSLT, но в моих юзкейсах почти всё равно что на вход подаётся кроме самого XSLT-кода. Это может быть valid XML, well formed XML или IE-6 only HTML.

[torbasow]

Не правильно сформированный XML на входе XSLT-шаблона? Или на выходе?

[VolCh]

Года два назад и я таки был :)

[torbasow]

Неплохой вариант, а на IE8 я могу себе позволить забить… Только наследование гарнитуры нарушится, так же как в варианте с нулевым фонтсайзом — наследование кегля.

[torbasow]

Но тогда можно и нулевой фонтсайз использовать, даже и проще.

[aTei]

А ещё можно использовать rem (root em), вполне удобно.

[VolCh]

С некоторых пор предпочитаю нечто вроде

<ul><li><p>...
        ...
        <p>...
    <li><p>...
        ...
        <p>...
    <li>...
</ul>

В крайнем случае (при активном использовании атрибутов)

<ul>
    <li>
        <p>
           ...
        ...
        <p>
           ...
    <li>
        <p>
           ...
        ...
        <p>
           ...
    <li>
        ...
</ul>

Если закрывающие теги optional, то зачем их писать? а структуру показываю отступами.

[spbcypher]

[muradovm]

Эх, где ж вы были вчера…

[KeepYourMind]

Во множестве шаблонизаторов, по крайней мере в PHP, есть удаление пробелов. Например в twig.

[timonstr]

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

[grokru]

Вы правы. Обычно тема поста приходит на ум при решении какой-то практической задачи. Начинаю гуглить — нахожу интересные статьи, все они обычно расположены в англоязычных блогах. Я всегда даю ссылки на источники, а также на другие интересные сайты по теме. Многие авторы этого не делают, выдавая легкий рерайт-перевод за уникальный контент.

А в обсуждениях участвую редко из-за нежелания разводить холивары. Внимательно отношусь к критике, отзывам и замечаниям в личке, Комментарии иногда бывают конструктивны, но это скорее исключение, чем правило.

[psywalker]

Пользуясь случаем, тоже хотелось бы сказать пару слов grokru. Выскажу чисто своё имхо.

grokru, я конечно понимаю, что, накатав быстрый пост на хабре, ты получишь новую карму, попиаришь свой сайт + продашь новые инвайты, как ты обычно делаешь. Но как бы ок, проблем нет, это твои дела, НО, почему бы тогда думать не только о себе, но ещё и о тех, кто будет читать твои посты?

Я просто к тому, что я не против твоего бизнеса, но, имхо, о качестве продуктов и их пользователях тоже нужно заботиться.

Почему я считаю, что тебе плевать? Всё просто. Во-первых, я читаю твои посты, в которых всегда куча неточностей: несоответствие спецификациям, важная недосказанность и т.д. Во-вторых, тебе абсолютно пофиг даже на то, что тебе пишут в комментариях. Ты никогда не исправляешь ошибки, на которые тебе указывают, показывая тем самым своё наплевательское отношение ко всем. И это касается не только твоих личных постов, но и переводов. В общем, всех твоих постов.

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

За всё время ты накатал уже очеень мноога молниеносных статей, в каждой из которых было куча косяков, а теперь представь, сколько здесь сидит народа и сколько из них получили ошибочные знания, принимая их за правду. Может пора уже думать не только о себе?

[aTei]

> в Опере, некоторых версиях Сафари, может быть и в других браузерах поставлен пользователем.

Не знал, спасибо за информацию.

[webmix]

habrahabr.ru/post/117109/
habrahabr.ru/post/154791/
habrahabr.ru/post/49756/
habrahabr.ru/post/75905/
и т.д.

[Matrosked]

ооох, примеры «Для борьбы с промежутками » частично безрадостны).

1. «Использование отрицательного значения margin:»

— только отступы между блоками зависят от размера текста, и что у вас 4px, то у другого 8px (см. системное увеличение размера шрифта, например)

2. «Странный способ с отсутствием закрывающего тега LI»

— далеко не всегда удобно и нужно держать контент в списках (в идеале, то что выглядит как список — должно быть с делано списком, табличные данные — таблицей и т.п.), и если для li закрывающий тэг не обязателен, то в случае с дивами такой способ не прокатит.

3. «Установка значения font-size на ноль:»

— если работаете с em-ами, можете забыть об этом решении

4. «Удаление пробелов в списках»

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

.test-div{
  display: inline-block;
}

   <div class="test-div">контент</div><!--
--><div class="test-div">контент</div><!--
--><div class="test-div">контент</div><!--
--><div class="test-div">контент</div>

Так вы хотя бы не будете ломать глаза, «кто на ком стоял» — что с чем и на каком уровне лежит.

[aTei]

> если работаете с em-ами, можете забыть об этом решении

Rem (root em) от этого спасает. Не работает только в очень старых браузерах caniuse.com/rem

[Matrosked]

Как раз сегодня уже давал комментарий по этому вопросу в другой теме). От этого и «px» спасает ;).

Как показывает практика, большинство наших клиентов (РФ + Европа) настаивают на поддержке того же IE, начиная с версии 8. И если с квадратными углами и отсутствием теней клиент, как правило, готов мириться, то с простыней одним кегелем — уже никак.
Поверьте, я только за использование rem, и жду не дождусь, пока пожилые версии IE канут в лету, но суровые реалии таковы, что пока для этого немного рановато.

Да и вцелом, об этом способе борьбы с отступами: использование общего правила для решения частной ситуации — плохая практика, действие по принципу «сначала создаем проблему, а потом ее решаем».

[s0rr0w]

Inline-block по умолчанию выравнивается по базовой линии, а float — по верхнему краю.

По какому-такому верхнему краю? Далеко не факт.

[s0rr0w]

Удивительный float
Всегда есть нюансы.

[s0rr0w]

Это не важно, мы живем в эру постоянно мигрирующих стандартов, поэтому нужно помнить, что знания, которые были получены в прошлом, не факт что будут работать в будущем. Кстати, помнится был драфт мультиколочного текста, при котором флоат мог принимать значение fr и располагаться между колонок. А еще нужно держать в голове, что для монгольского языка лево и право может быть далеко не слева и справа.

[spbcypher]

из профиля
>> хабраюзерам-новичкам дам совет по подготовке и оформлению топика.

are you serious? судя по качеству публикуемых вами материалов… я бы посоветовал новичкам обойтись без вашего совета.

статус вконтактика
>> хабраюзер #1

а вот тут все встает на свои места — как я предположил ранее, в посте который вы поспешно убрали в черновики (волнение за карму?), вы набиваете счетчик. Что же… меня это не очень удивляет. Меня поражает то, что пипл хавает. Неужели в сфере веб-разработки все так плохо? Хотя… с другой стороны, чем больше неучей — тем я ценнее как специалист, так что дерзайте )

[ZUGA]

Также для борьбы с промежутками можно использовать letter-spacing: -4px; но не работает в Safari.
Очен правельно отметил Matrosked, что 4 пикселя у большенства и зависит от размера шрифта. Вообще не стоит разчитывать на них!
Самый лучший способ — создовать HTML в котором отсутсвуeет whitespace между тагами.

[stagnantice]

Пока есть IE7, лучше пользоваться float. Но иногда другого выхода просто нет.