Вёрстка « inline bug (лишние отступы)

Ну, прям бесит! Откуда эти отступы между блоками? http://bugatak.ru/shared/inline.html.

Может это и не баг вовсе, если везде, кроме IE отображается так?

upd: example для страждущих: http://bugatak.ru/shared/inline-example.html

upd2: Полцарства в придачу тому, кто покажет способ, как сделать блоки в строчку без пробельных отступов мужду ними. Повторюсь, пример того, что есть http://bugatak.ru/shared/inline-example.html, а нужно, как понимаете, без пробелов. И ориентрируйте по центру, ога ;)

upd3: обновил для зануд, сделайте без отступов.
0
bug inline отступы

1 ответов

Вот решение студии Лебедева , которое легким движением руки можно подогнать под мои требования, а именно:

  • резина;
  • отсутствие пробелов между блоками;
  • ориентация по центру.

-2

Секрет прост. Это же inline элемент! Все пробелы, отступы, переносы и символы влияют на позиционирование.

Сейчас:


<ul>
  <li>aaa</li>
  <li>sss</li>
  <li>ddd</li>
  <li>fff</li>
</ul>
 

Решение


<ul>
  <li>aaa</li><li>sss</li><li>ddd</li><li>fff</li>
</ul>
 


6
Кроссбраузерное решение проблемы отступов inline-block:

Для родителя:

#parent
{
  font-size: 0; line-height: 0; letter-spacing: -1px;
}
 

Для детей:

#parent > .child
{
  font-size: 12px; line-height: normal; letter-spacing: normal;
}
 
0

Во всех браузерах, кроме IE6, срабатывает отрицательный margin


margin: -2px;
 
Для IE6 нужен нулевой margin

margin: 0;
 

Честно говоря, мне не нравятся "хаки", но в данном случае (если нет никакой возможности изменить li на div) я не придумал другого решения.

UPD: Для того, чтобы отступ не зависел от размера шрифта и разрешения экрана используем вместо пикселей em. Значение отступа подбираем экспериментальным путем. В данном случае

margin: -0.3em;
 
Вот работающий пример. Попробуйте поизменять размеры шрифта, проверить "резиновость". У меня работает во всех браузерах последних версий.
0

Без пробелов так без пробелов.


            html,
            body,
            ul {
                margin: 0;
                padding: 0;
            }
            li {
                float: left;                
                width: 25%;
                padding: 10px 0;
                text-align: center;
                color: #fff;
                list-style-type: none;
                background-color: green;
            }
            li.odd {
                background-color: red;
            }
 
0

Как обычно, и как я говорил выше - что бы было правильно и так как хочет автор нам нужно не использовать в списке пунктов display:inline или inline-block. Тут явно просится block.

Но, что бы нормально было выравнивание по центру всего меню, было бы классно использовать inline или inline-block для обертки пунктов меню, то есть для ul. И наконец, кто-то должен будет выровнять пункты. Оборачиваем UL в DIV, который имеет CSS свойство text-align: center.

CSS:


#menu {
  text-align: center;
}

ul {
  margin: auto;
  list-style: none;
  padding: 0;
  height: 20px;
  display: inline-block;
}

li {
  width: 150px;
  display: block;
  float: left;
  height: inherit;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
 

HTML

<div id="menu">
  <UL>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
  </UL>
</div>
 

Демонстрация результата
0

</div><!--
-------><div
 

вот так сделал на стыке двух inline-block'ов, без хаков и визуально воспринимается норм. хотя для большого числа li элементов это будет слишком уже не симпатично :)
-1

выставьте для все браузеров


li { display: inline-block; }
 

а для ie


li { display: inline; }
 
-1

По-нормальному сделать не получится, потому что по-нормальному вы сами не хотите.


li { margin-right: -4px; }
 
вам поможет, но это извращение, извините.
-1