0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 8
1

Как сделать вертикальные полосы между пунктами меню

05.09.2017, 11:00. Показов 5108. Ответов 3
Метки нет (Все метки)

Доброго времени суток!

Хочу сделать вертикальные полосы между пунктами меню. Использую теги <border-right>, <border-left> толщиной 1 пиксель. Собственно логично, что первая и последняя линия 1 пиксель, все остальные 2. Как можно осуществить задуманное, но чтобы толщина всех линий была одинаковая?
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.09.2017, 11:00
Ответы с готовыми решениями:

Как сделать горизонтальные линии между пунктами меню?
как на картинке Сейчас у меня пока только такой результат, как на рисунке снизу

Как сделать разделители между пунктами меню прозрачными?
border-top: 2px solid transparent; - такой вариант работает только между выпадающим и основным...

Необходимо сделать отступы между пунктами меню и реализовать hover-эффект
Доброго дня уважаемые, крутой у Вас форум! В общем я начал изучать верстку сайта и вот у меня такая...

Как добавить между пунктами меню расстояние?
В css не могу сделать пробелы между пунктами меню

3
1782 / 1032 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
05.09.2017, 13:13 2
Potefas, margin-right: -1px; ??
1
4 / 4 / 3
Регистрация: 27.12.2016
Сообщений: 114
05.09.2017, 13:53 3
Можно сделать через псевдо елеметов before и after

HTML5
1
<div class="border"></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bordrer
 position: relative
 &::before
  position: absolute
  content: ''
  display: block
  haight: 100%
  border-left: 1px solid #fff
  left: 0
  bottom: 0
 &::after
  position: absolute
  content: ''
  display: block
  haight: 100%
  border-left: 1px solid #fff
  right: 0
1
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 219
05.09.2017, 13:59 4
Если допустимо, то первую и последнюю линию вообще уберите, добавьте два псевдокласса first-child и last-child
HTML5
1
<div class="line"></div>
CSS
1
2
.line:first-child { border-left: none; }
.line:last-child { border-right: none; }
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.09.2017, 13:59

Как создать отступы между пунктами меню?
&lt;div class=&quot;container&quot;&gt; &lt;!-- The class on the root UL tag was changed to match the...

Как убрать разделители между пунктами Горизонтального меню
Как скрыть вертикальную линию при наведении на нее курсора? Скриншот:...

Убрать вертикальные полосы в левой части кнопок меню
Всем привет. Купил шаблон для Joomla 3 и VirtueMart, установил, начал наполнять, и появилась...

Не могу понять как правильнее увеличить отступ между пунктами меню
Доброго времени суток! Подскажите, можно ли в css задать какой-нибудь параметр в блоке id=menu...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.