Нежелательный запас в элементах списка встроенных блоков

Ответ 1

Это вызвано display: inline-block;

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

Измените его на float: left;.

Я думал, что это была прокладка, но посмотрел поближе, и оказалось, что это был дисплей:)

Пример здесь.

После дальнейших исследований Я обнаружил, что inline-block является зависимым от пробелов методом и отображает маркер 4px справа от каждого элемента.

Чтобы этого избежать, вы можете запускать все свои li вместе в одной строке или блокировать конечные теги и начинать теги вместе следующим образом:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Пример здесь.

Надеюсь, что помогает:)

Ответ 2

Я нашел очень хороший трюк, чтобы преодолеть эту же проблему. У моих элементов списка в моем верхнем меню были поля пробелов между ними после того, как я сбросил "float: left;" в пользу "display: inline-block;".

Попробуйте установить размер шрифта для неупорядоченного списка на "0", то есть:

ul { font-size:0; }
li { font-size:18px; }

Работал для меня.

Ответ 3

Увидев этот пост и ответы, я подумал, что объясню, что происходит здесь. Это не ошибка, но на самом деле это предполагаемое поведение встроенного блока.

Лучший способ проиллюстрировать, почему это правильное поведение, с помощью смайликов в абзаце:

<p>
  Hi, really glad to hear from you yesterday 
  <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>

Изображения по умолчанию отображаются как встроенный блок (IE: элемент блока, который подчиняется встроенному потоку - подобно одному символу текста). В этом случае вы хотели бы, чтобы эти два смайлика примыкали друг к другу, но вам все равно нужно пространство между "вчера" и первым смайликом.

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

Чтобы ответить на ваш вопрос, лучше всего сделать это:

ul {
  height: some set height
       /* OR */
  overflow-y: auto;
}

ul li {
  float: left;
}

Ответ 4

По моему мнению, и в этом случае лучше всего удалить пробел между родителями li и переставить его на li!

Итак, ваше правило CSS:

ul{
    padding: 0;
    border: solid 1px #000;
    letter-spacing  :-4px; /*Remove the letter spacing*/
}
li{
    display:inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
    letter-spacing  :0px; /*Put back the letter spacing*/ 

}

Ответ 5

Удалите все теги </li>. Я не знаю, почему, но это устраняет проблему с маржей.

<ul>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
</ul>

Ответ 6

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

Поэтому вместо написания

    <li>
    <div>first</div>
    </li>
    <li>
    <div>first</div>
    </li>

Я должен написать:

        <li>
            <div>first</div>
        </li><li><div>first</div>
        </li><li>....

Отсутствие пробелов между ли и закрывающим тегом. Причина, по которой это пространство не появлялось при добавлении через js, заключается в том, что метод appendTo имеет все теги без пробелов между ними. Да, это отстой, но это единственное решение, если я не хочу использовать float: left.

Решение найдено здесь

Ответ 7

Изменение display: inline-block на display: table-cell также удаляет пробел.

    li {
        display: table-cell;
        padding: 10px;
        width: 114px;
        border: solid 1px #f00;
        margin: 0;
    }

Ответ 8

Я нашел ответ на этот вопрос здесь: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Он говорит:

"... это один гигантский недостаток [к встроенному блоку]. То есть, поскольку элементы становятся визуализированными inline, в вашем HTML-коде будет влиять пустое пространство. Это означает, что если у нас есть пространство между LI элементов в нашем коде, он будет отображать поле с 4 пикселями справа от каждого элемента."

Итак, решение состоит в том, чтобы удалить разрывы строк между элементами inline-block.

  <ul>
    <li><a href="#">Make</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Not</a></li>
    <li><a href="#">War</a></li>
  </ul>

становится...

<ul>
    <li>
      <a href="#">Make</a>
    </li><li>
      <a href="#">Love</a>
    </li><li>
      <a href="#">Not</a>
    </li><li>
      <a href="#">War</a>
    </li>
</ul>

И надоедливые поля исчезают.

Ответ 9

Попробуйте это решение:

    <ul><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
    --></ul>

Ответ 10

Попробуйте изменить "display: inline-block" на "float: left". Разделение, которое вы видите, исчезает. Вот вам jsFiddle для игры:

http://jsfiddle.net/rcravens/XD9SD/

Боб