Горизонтальная линия между строками элементов списка

  • 7 Ответов
  • 933 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Ilhom666

  • ******
  • 1295
  • 166
Собственно сабж - есть меню, пункты которого реализованы через <li> в несколько строк. Можно ли как то строки разделять горизонтальной линией? Пробовал с помощью border-bottom, но тогда линия получается прерывистой, только непосредственно под элементами.

*

vipiusss

  • ********
  • 5508
  • 318
  • JoomlaNet
если CSS, то border-bottom:1px solid #ccc;   к примеру.
если <hr>, то можно сделать свой цвет для <hr> в сss.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Ilhom666

  • ******
  • 1295
  • 166
<hr> не подходит т.к. список пунктов один и динамический. С border-bottom не могу добиться чтобы полоса была сплошной

*

AlekVolsk

  • ********
  • 6301
  • 336
С border-bottom не могу добиться чтобы полоса была сплошной
Чтобы полоса бордера была сплошной, нужно li {margin-left:0;margin-right:0;}

*

neogeek

  • ****
  • 203
  • 18
Чтобы полоса бордера была сплошной, нужно li {margin-left:0;margin-right:0;}
+ возможно еще понадобится убрать display:inline; или display:inline-block; и дописать float:left; или float:right;

*

Ilhom666

  • ******
  • 1295
  • 166
если использовать float то не получается центрировать пункты-сироты (напр на рисунке пункты 4 и 5). Обнуление margin-ов не помогло ((

*

neogeek

  • ****
  • 203
  • 18
Значит я угадал. При display: inline либо inline-block появляются отступы между элементами вне зависимости от margin
тогда вам нужно для ul задать font-size равный нулю это должно решить проблемуэ
пример
Код
ul{
  font-size: 0; /*здесь обнуляем чтобы отступы убрать*/
}
li{
font-size:14px; /*здесь указываем чтобы не наследовалось*/
}

*

neogeek

  • ****
  • 203
  • 18
При display: inline либо inline-block между элементами li есть пустое пространство (пробелы, табуляция, переход на новую строку), это пространство имеет стандартный (или тот который вы указали для страницы) шрифт и по этому расстояние равно размеру шрифта для одного символа. Указав размер шрифта как нулевой мы фактически убираем этот промежуток.