Question

所以我有大量的复选标记图标，我想用它作为列表项目符号。我需要将文本对齐在项目符号的顶部，并保持文本不被包装在其他文本下方，同时保持合理的行高。我发现的其他所有内容都给出了一个或另一个的指示，但不是两者都在一起。

CSS

<style>
ul {
    list-style: inside;
    list-style-image:url('http://i.imgur.com/DRHniGK.png')
}
li {
    vertical-align:top;
}
</style>

HTML

<div style="width:940px;">
        <ul>
            <li>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </li>
            <hr>
            <li>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </li>
            <hr>
            <li>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </li>
            <hr>
            <li>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </li>
            <hr>
            <li>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </li>
        </ul>
    </div>
</body>

Answer 1

1）您的HTML无效。您不能在列表项之外插入元素。如果您想要更多间距，请在列表项中添加填充或边距。

2）使用CSS背景，而不是list-style-image：

li {
    background-image:url(http://i.imgur.com/DRHniGK.png);
    background-repeat:no-repeat;
    background-position:3px 3px;
    padding-left:15px;
    list-style-type:none;
}

...然后调整背景位置和填充以适合您的布局。

需要将li文本与子弹图标顶部对齐，并防止它在第二行上包裹

1 个答案: