Пространство между строчными элементами списка

Возможный дубликат:
Нежелательная маржа в элементах списка встроенных блоков
Как удалить "Невидимое пространство" из HTML

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

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Ответы

Ответ 1

Я видел это и ответил на него раньше:

После дальнейшие исследования У меня есть  что 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>

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

Как упоминалось в других ответах и ​​комментариях, наилучшей практикой для этого является добавление font-size: 0; к родительскому элементу:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Это лучше для чтения HTML (избегая запуска тегов вместе и т.д.). Эффект интервала связан с настройкой расстояния между шрифтами, поэтому вы должны reset для встроенных элементов и снова установить его для содержимого внутри.

Ответ 2

Решение:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Вы должны установить размер родительского шрифта равным 0

Ответ 3

Я бы добавил свойство CSS float влево, как показано ниже. Это избавляет от лишнего пространства.

ul li {
    float:left;
}

Ответ 4

Собственно, это не относится к display:inline-block, но также относится к display:inline. Таким образом, в дополнение к решению Дэвида Хорака это также работает:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Ответ 5

Другое решение, похожее на решение Gerbus, но это также работает с относительным размером шрифта.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

Ответ 6

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

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

Вы добавляете знак комментария между каждым концом и началом: "li" Тогда горизонтальное пространство исчезает. Надеюсь, что ответ на вопрос Спасибо

Ответ 7

просто удалите перерывы между li в вашем html-коде... сделайте li только в одной строке.

Ответ 8

Даже если это не inline-block, это решение заслуживает рассмотрения (позволяет почти одинаковое управление форматированием с верхних уровней).

ul {
  display: table;
}
ul li {
  display: table-cell;
}