Нежелательное поле в элементах списка встроенных блоков [дубликат]

этот вопрос уже есть ответ здесь:

у меня есть следующий HTML-код:

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

и следующие правила css:

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

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

по какой-то странной причине элементы списка отображаются с полями вокруг них в обоих Firefox и хром. Глядя на firebug, элементы списка вообще не имеют никакого поля, но между ними, похоже, есть пустое пространство.

Если я позже добавлю больше элементов списка через javascript с помощью 

$('<li><div>added via js</div></li>').appendTo($('ul'));

"поле" не появляется вокруг новых элементов:

есть идеи, что, черт возьми, здесь происходит?

10 81
html css

10 ответов:

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

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

изменить на float: left;.

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

пример.

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

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

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

пример.

надеюсь, что это поможет:)

115

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

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

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

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

68

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

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

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

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

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

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

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

ul li {
  float: left;
}
9

на мой взгляд и в этом случае лучше всего сделать, это удалить письмо интервал 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*/ 

}
7

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

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

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

вместо того, чтобы писать

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

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

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

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

решение здесь

4

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

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

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

Он говорит:

"...есть один гигантский недостаток [для встроенного блока]. То есть, поскольку элементы становятся встроенными, пробелы в вашем 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>

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

2

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

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

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

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

Боб

0