Как избавиться от белого пространства между горизонтальными элементами CSS? [Дубликат

StackOverflow https://stackoverflow.com/questions/3043707

Вопрос

Этот вопрос уже имеет ответ здесь:

У меня есть следующая тестовая страница и CSS. При отображении существует 4PX разрыв между каждым элементом списка. Как мне получить предметы, чтобы быть рядом друг с другом?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

CSS:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}
Это было полезно?

Решение

Вам нужно использовать display:block и float:left на liс удалением пространства. Когда они встроены, браузер обрабатывает их как слова, и поэтому оставляет места между.

Также см Мой подобный вопрос.

Другие советы

Объедините @skilldrick и @teedyay, и у вас есть ваш ответ и объяснение.
Если <li>s рассматриваются как слова, чем любое белое пространство вокруг них, конденсируется до одного пространства.

Так что я думаю, это функция, которая выглядит как ошибка.

Чтобы удалить пространство либо положить все ваши <li>s в цепочке без пробела между ними.
ИЛИ
Уменьшить размер шрифта на <ul> до 0 и восстановить размер на <li>с

Вы также можете установить font-size:0 для <ul> ярлык.

Боюсь, это тоже грязно, но я буду (приятно) удивлен, если для этого есть чистое решение.

Поместите все ваше <li>S на одной строке:

<li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

Извини.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top