Как сделать маркированный список (меню) с пунктирными линиями - PullRequest
Новая
       3

Как сделать маркированный список (меню) с пунктирными линиями

0 голосов
/ 02 марта 2012

Я пытаюсь создать список / меню маркеров с пунктирными линиями между каждым тегом привязки.

При наведении курсора фон становится розовым, и между ним и ним должно быть достаточное расстояние.пунктирная линия:

Comp showing horizontal items separated by pink dashed lines.

Это выглядит нормально, но когда я переключаюсь на мобильную раскладку, позиционирование пунктирных линий полностью отключено.

Здесьмой CSS: 

li {
    background: url('images/dotted-line.png') repeat-x 0px 41px;
    height: 55px;
    padding: 0;
}

a:link, a:visited {
    display: block;
    color: @darkpink;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 8px 8px 8px;
    margin-top: -9px;
    text-transform: uppercase;
    width: 195px; /* 188 */
    cursor: pointer;
    .textshadow(); /* less minim */
}

a:hover, a.selected {
    border-radius: @radius;
    background-color: @darkpink;
    .textshadowdark();
    cursor: pointer;
    color: #FFF;
}

Мне просто интересно, будет ли хорошей / плохой идеей поставить фоновую пунктирную линию на тег li.Лучше просто изменить положение изображения в медиа-запросе или вместо этого поместить изображение в тег anchor?

1 Ответ

4 голосов
/ 02 марта 2012

Да, я согласен со Свеном, используйте что-то вроде этого: 

li {
    border-bottom:1px dashed #ce1443;
    height: 55px;
    padding: 0;
}

Я пошел с dashed, потому что dotted может быть немного больше, и ваш скриншот выше выглядит как dashed,Я только что получил быстрый скриншот для цвета.

Также ... Вы пытаетесь сделать только этот мобильный?Или это должно быть отзывчивым?Возможно, потребуется переключиться на некоторые размеры em, чтобы они были больше по размеру экрана.

...