Пули центр с неупорядоченным списком - PullRequest
Новая
       2

Пули центр с неупорядоченным списком

24 голосов
/ 01 июля 2011

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

Ответы [ 3 ]

53 голосов
/ 02 июля 2011

Установите позицию стиля списка внутри элемента списка, см. эту демонстрационную скрипку .

CSS: 

ul {
    list-style-position: inside;
}
0 голосов
/ 07 марта 2017

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

У меня была такая же проблема, вот так:

Bullet centered in text block

Мой HTML выглядел так: 

<ul>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
</ul>

А CSS вот так: 

a {
    display: inline-block;
    vertical-align: middle;
}

Видите оскорбительную часть? vertical-align: middle; декларация.

Есть два решения:

Раствор 1

Удалите декларацию vertical-align: middle;.

Решение 2

Измените значение: vertical-align: middle; на vertical-align: top;.

Результат (как и ожидалось в начале):

Bullet top aligned

Надеюсь, это поможет.

0 голосов
/ 02 июля 2011

Вы можете сделать что-то вроде этого: 

(css)
li div:before
{
   background-image:url('bullet.png');
}

(html)
<ul>
    <li>
        <div>
            text<br />
            more text
        </div>

    </li>
</ul>
...