带有无序列表的子弹中心

【问题标题】：Bullets center with unordered list带有无序列表的子弹中心
【发布时间】：2011-07-01 15:36:57
【问题描述】：

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

【问题讨论】：

您能展示您的代码或提供链接吗？
你确定是子弹而不是背景图？
如上。
标签中的要点应该位于顶部，它使用的是图像吗？能否提供一个工作样本？

我认为洛根的要求很清楚。

抱歉，直到现在我才回复你们……是的，子弹正在寻找图像。 CSS 代码是： .content-a ul li { margin: 0 0 3px 0;填充：0 0 0 13px；背景：透明 url(../images/bullet-a.png) 无重复 0 25%；当我在玩代码时，它最初设置为 100%，但我发现 25% 更适合子弹。虽然仍然不准确。在 25% 时，项目符号点仍位于顶行下方几个像素处，而在单行上，项目符号点位于文本行上方几个像素处。

标签： html css html-lists

【解决方案1】：

将列表样式位置设置在列表项内部，参见this demo fiddle。

CSS：

ul {
    list-style-position: inside;
}

【讨论】：

由于某种原因这对我不起作用，但 li { list-style-position: inside; } 起作用了。可能与样式表的其余部分有关（我正在使用模板）。无论如何，已排序。

【解决方案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;。

结果（如开头所料）：

希望这会有所帮助。

【讨论】：

【解决方案3】：

你可以这样做：

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

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

    </li>
</ul>

【讨论】：