子弹中心有无序列表

Question

有没有人知道使子弹点位于多行项目符号列表顶部的CSS？由于某种原因，我使用的模板中心点位于左侧，而不是简单地坐在第一个单词旁边，如果我有多行文本。

Answer 1

将列表样式位置设置为列表项内，请参阅 this demo fiddle 。

CSS：

ul {
    list-style-position: inside;
}

Answer 2

这不是一个答案本身，但它可以让其他人了解具有不同情况的类似视觉情况。

我有同样的问题，如下：

我的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;。

结果（正如预期的那样）：

希望这有帮助。

Answer 3

你可以这样做：

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

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

    </li>
</ul>