css - список ссылок с укороченными горизонтальными границами? - PullRequest
Новая
       18

css - список ссылок с укороченными горизонтальными границами?

0 голосов
/ 04 июня 2011

Я пытаюсь сделать что-то вроде этого: 

   a link here
   ------------------
   another link here
   ------------------
>> active link here
   ------------------
   one more link
   ------------------

, где все --- являются границами, но равной длины. Если текущая страница является ссылкой (то есть активной ссылкой), тогда отображается >> (это будет изображение). Проблема в том, что если я добавлю отступ к li s, то это приведет к тому, что граница будет находиться под >>, что нежелательно. Очевидно, нет JavaScript.

Общая разметка, с которой я пытался работать, такова: 

<ul>
  <li><a href="#">a link here</a></li>
  <li><a href="#">another link here</a></li>
  <li><a href="#">active link here</a></li>
  <li><a href="#">one more link</a></li>
</ul>

Ответы [ 2 ]

5 голосов
/ 04 июня 2011

Я бы предложил применить класс .active к li, а не к ссылке, а затем использовать: 

li {
    margin: 0 0 0 5em;
    border-bottom: 1px dashed #ccc;
    position: relative;
}
.active:before {
    position: absolute;
    display: block;
    left: -3em;
    width: 2.5em;
    content: '>>';
    content: url(http://path/to/image.gif);
}

Демонстрация JS Fiddle .

Учитывая трудности с использованием кросс-браузера псевдоэлемента :before, представляется целесообразным указать, что вместо него можно использовать list-style-image: 

li {
    margin: 0 0 0 5em;
    border-bottom: 1px dashed #ccc;
    position: relative;
}

li.active {
    list-style-position: outside;
    list-style-type: circle; // the fall-back option
    list-style-image: url(http://davidrhysthomas.co.uk/linked/bullet_point.gif);
}

Демонстрация JS Fiddle .

Ссылки:

0 голосов
/ 04 июня 2011

Вы всегда можете изменить свои теги a для отображения блока и сделать что-то подобное, чтобы получить эффект границы, который вы ищете. Поскольку граница применяется к элементу a, не имеет значения, применяете ли вы заполнение к li или нет. 

<html>
    <head>
        <style type="text/css">
            ul {width: 100px;}
            ul li a {border-bottom: 1px black dashed; display: block;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">a link here</a></li>
            <li><a href="#">another link here</a></li>
            <li><a href="#">active link here</a></li>
            <li><a href="#">one more link</a></li>
        </ul>
    </body>
</html>
...