UL-LI принудительное расстояние?

Question

Я пытаюсь сделать простую панель навигации.

Это мой HTML:

<div id="navbar">
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

и мой CSS:

#navbar ul {
    list-style:none;    
}
#navbar ul li {
    display:inline;
    background:green;
    margin:0px;
}

Как видите, limargin установлен в 0px, но между промежутками lis. Я исследовал это, но не нашел ничего полезного.

Как мне избавиться от этого расстояния? И по выбору: что это за интервал?

Answer 1

Пробелы вокруг элементов уровня inline или inline-block?

Этот интервал проистекает из того факта, что вы рассматриваете элементы списка как встроенные элементы: поэтому любые пробелы между ними будут обрабатываться и объединяться в один символ пробела. Есть несколько способов борьбы с этой проблемой, и Крис Койер написал об этом очень хорошую статью: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Одним из способов является удаление любых пробелов между <li> элементы: будь то использование HTML-комментариев или просто их полное удаление:

<div id="navbar">
    <ul>
        <li>123</li><!--
        --><li>1234</li>
    </ul>
</div>

или же...

<div id="navbar">
    <ul>
        <li>123</li><li>1234</li>
    </ul>
</div>

---

обходные

Однако я рекомендую вам использовать поплавки или последнюю спецификацию CSS3 flexbox для создания горизонтальных меню. Оба обходных пути доступны в виде фрагмента кода в конце ответа... но позвольте мне позволить себе роскошь объяснить предложенные решения:

Не рекомендуется: использование font-size: 0 в родительском элементе

Хотя это быстрое и простое решение, это решение создает проблемы для макетов с использованием относительных размеров шрифта, таких как % а также ems, потому что размеры шрифта будут вычисляться относительно размера шрифта родителя. Соотношение, продукт или деление чего-либо с 0 дам 0, Тем не менее, если вы используете px, rem, vh, vw, vmax или же vmin это не зависит от вычислений на основе размера шрифта родительского элемента, это нормально.

Поплавки

Плавания очень полезны и, что более важно, просты для понимания и широко поддерживаются практически во всех ВСЕХ браузерах (если IE4.0 может это поддерживать, я подозреваю, что все браузеры сегодня могут). Тем не менее, одна проблема заключается в том, что, когда все непосредственные потомки родительского элемента плавают (например, когда мы плаваем все <li> элементы в <ul>), размеры родителя рухнут.

Популярным исправлением будет overflow: hidden (см. эту статью для подробного объяснения механизма) или решения для исправления ошибок. Причина проста: плавающие элементы вынимаются из обычного потока документов.

CSS3 flexbox спецификация

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

Чтобы избежать промежутков между элементами, вам придется:

• растянуть элементы, используя flex-grow: 1
• избегать использования space-around или же space-between за justify-content

... или их комбинация.

---

Решение демо

Без лишних слов, вот два возможных обходных пути в фрагменте кода:

ul {
  background-color: #eee;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  }
ul li {
  margin: 0;
  }

#navbar1 ul {
  /* To prevent parent collapse when children are floated */
  overflow: hidden;
  }
#navbar1 ul li {
  float: left;
  }

#navbar2 ul {
  display: flex;
  }

<div id="navbar1">
<p>Solution 1: Use floats.</p>
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

<div id="navbar2">
<p>Solution 2: Use CSS3 flexbox.</p>
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

Answer 2

Простой обходной путь для этой проблемы заключается в использовании font-size: 0; на родителя и объявить font-size на <li>,

#navbar ul {
    list-style:none;
    font-size 0; //removes the extra space//
}

#navbar ul li {
    display:inline;
    background:green;
    margin:0px;
    font-size: 12px;
}

Способ, которым я лично решаю эту проблему, заключается в добавлении отрицательного поля к <li>"s

#navbar ul li {
    display:inline;
    background:green;
    margin: 0 -4px 0 0; //removes the extra space//
}

И еще один вариант - плавать дочерние элементы, но вам нужно очистить поплавки на родительском элементе с помощью overflow: hidden,

#navbar ul {
    list-style- none;
    overflow: hidden; //clear the floats//
}


#navbar ul li {
    margin: 0 5px 0 0; //provides spacing between elements//
    background:green;
    float: left;
}

Answer 3

Вместо этого используйте float:

#navbar ul li {
    float: left;
    background:green;
    margin:0px;
}