Почему 4 элемента списка не умещаются в строку?

Question

[Виктор Янышев]

Собственно, нужно горизонтальное меню с 4-мя пунктами, контейнер меню 100% ширины, вложены элементы 25% ширины, внешние и внутренние отступы по ширине в 0, но 4 элемента всегда выпадает, почему?
https://jsfiddle.net/u0hggbnz/

Comments

[Dmitriy Uvarov]

Скидыщь

Answer 1

[Одиночка Айс]

Потому что li используются в качестве inline-block`ов, которые имеют небольшой отступ. Добавьте ul св-во font-size:0; и a нужный font-size (https://jsfiddle.net/u0hggbnz/1/)

Comments

[Антон Спирин]

Не пишите глупостей, нет никакого отступа, браузер заменяет переносы строк пробелами.

[Дима Паутов]

Антон Спирин, я думаю это он и имел ввиду!

[Антон Спирин]

Дима Турков, сильно сомневаюсь.

[Одиночка Айс]

Антон Спирин, согласен, совсем забыл, что если выстроить все инлайновые элементы в строку в html принудительно, то никаких отступов не будет

[alex-1917]

двойной костыль

[Одиночка Айс]

alex-1917, и в чем же костыль то? Тем более двойной? Еще раз повторяю, никто в строку из программистов выводить ничего не будет, это тупо.

[alex-1917]

Одиночка Айс, я тоже так думал, когда пилил верстку фотогалереи, но когда заказчик добавил условие, чтоб на всех-всех экранах фотки строились рядами, без пустых мест, я ТУПО поменял в ШАБЛОНЕ вывода вывод элементов li так как выше написал, теперь ТУПО даже на самсунгах 2010 года все фотки идут без пробелов, а раньше приходилось писать кучу медиа-условий! если не надо делать лишних движений, зачем же их делать?? вдова-высекшая-сама-себя детектед?)))

[alex-1917]

Одиночка Айс, а я вот вывел так, какой вывод? что я тупой? давай подискутируем, один дискутер намедни уже прошел полный путь комментатора, некий травкин)))

[Одиночка Айс]

alex-1917, что вы городите? какая куча медиа-условий? это все лечится css, если вам нечего делать и вы всякий раз инлайн элементы в строку вручную пишите, это ваше время и ваши проблемы.

[alex-1917]

Одиночка Айс, прекрасная фантазия, браво!!)) делал так всего один раз, лет 5 назад, увы, тут вашей фантазии почти нет простора для творчества))) в основном приходится тюкать по жбану нанятым мною горе-верстальщикам за ихние косяки, не спят ночами, что-то там переверстывают, утром результат есть всегда..... руками они там в линию вытягивают или css рихтуют, вообще неинтересно))) у меня коньяк греется... и-и-ик

[Одиночка Айс]

alex-1917, епрст... холиварщик, блин... "делал один раз 5 лет назад", но зато тыкаете "что так надо делать" даже спустя 5 лет. P.S. увольте их))

[alex-1917]

Одиночка Айс, не, не уволю! норма прибыли иначе упадет))))

Answer 2

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/u0hggbnz/4/
margin-left: -4px, а первому 0

Comments

[Антон Спирин]

Вы все перепутали первому элементу надо margin-left: 0, а не последнему. У вас первый элемент получился съехавший.
А вообще использовать отрицательный маргин в этой задаче - самое худшее решение.

[alex-1917]

тройной костыль! внезапно у автора появится пятый пункт в меню - ваша затея рухнет как 1000-летний мост

Answer 3

[alex-1917]

Если вам все же надо использовать пункты списка как inline-block, то это легко решается следующим финтом, но зависит от метода формирования вашего списка - формируется он движком (тогда пилить ядро) или формируется вашим плагином - тогда все в ваших руках!

Поясню на примерах, смотри:

1. Неправильный вариант, браузер заменит переносы строк в коде пробелом и прощай ширина!

<ul>
	<li>бла-бла-бла</li>
	<li>бла-бла-бла</li>
	<li>бла-бла-бла</li>
</ul>

2. И даже так неправильно:

<ul>
<li>бла-бла-бла</li>
<li>бла-бла-бла</li>
<li>бла-бла-бла</li>
</ul>

3.1 А вот так прокатит:

<ul>
<li>бла-бла-бла</li><li>бла-бла-бла</li><li>бла-бла-бла</li>
</ul>

3.2 Или вот так прокатит, не помню уже, сам проверишь:

<ul><li>бла-бла-бла</li><li>бла-бла-бла</li><li>бла-бла-бла</li></ul>

Comments

[Одиночка Айс]

Никто вам вот так не будет выводить данные в цикле. И срать программисты хотели на это, это проблема верстальщиков.

[alex-1917]

Одиночка Айс, да я в курсе. особенно часто так делают (срут) т.н. называемые "яжепрограммисты", фанатеющие от Yii, повернутые на Джанге-чунга-чанге, обезумевшие от пИТОНА)))
Пилил как-то проект на одном из упомянутых т.н. фреймворков, так кодер такую губу показывал. пытаясь через нее разговаривать, что в полэкрана была губа эта. А суть была в небольшой правке шаблона вывода под мои требования. ОН ВООБЩЕ НЕ СТАЛ идти навстречу! губой подавился наверное. В итоге слили его и запустили на адекватном движке, где шаблонизация была сделана по-человечьи. Упомянутый автором вопроса список я поправил за 8,3 секунды, а оставшееся от суток 23 часа 59 минут 51,7 секунду успешно упивался коньячеллой, изредка поглядывая на нервно набивающих кучу стилей и вагон костылей верстальщиков, искренне не понимающих, что же не так с четвертым блоком...

[alex-1917]

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

[Одиночка Айс]

alex-1917, много текста)) суть в том, что это должен делать верстальщик, потому что перед программной частью верстка должна быть вылизана и сверена с дизайном.