Форум русской поддержки Joomla!® CMS
05.12.2016, 20:34:34 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 603 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Ilhom666
Живу я здесь
******

Репутация: +155/-0
Offline Offline

Сообщений: 1336



« : 06.05.2015, 11:29:01 »

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

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #1 : 06.05.2015, 11:32:33 »

если CSS, то border-bottom:1px solid #ccc;   к примеру.
если <hr>, то можно сделать свой цвет для <hr> в сss.
Записан
Ilhom666
Живу я здесь
******

Репутация: +155/-0
Offline Offline

Сообщений: 1336



« Ответ #2 : 06.05.2015, 15:59:25 »

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

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6454



« Ответ #3 : 06.05.2015, 16:44:25 »

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

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #4 : 06.05.2015, 18:22:27 »

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

Репутация: +155/-0
Offline Offline

Сообщений: 1336



« Ответ #5 : 06.05.2015, 19:16:17 »

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

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #6 : 06.05.2015, 20:33:14 »

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

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #7 : 06.05.2015, 20:35:05 »

При display: inline либо inline-block между элементами li есть пустое пространство (пробелы, табуляция, переход на новую строку), это пространство имеет стандартный (или тот который вы указали для страницы) шрифт и по этому расстояние равно размеру шрифта для одного символа. Указав размер шрифта как нулевой мы фактически убираем этот промежуток.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet