Question

当我使用列表的复选标记图像时，如何在图像周围包裹ul列表？我知道有list-style-image属性，但我已经读过它有跨浏览器的问题。

html是用WYSIWYG编辑器创建的，所以我宁愿在css中修复它。

这是我的html / css：测试

<style>
    ul.list-tick li {
        background-image: url("http://www.psc-cfp.gc.ca/ppc-cpp/images/small-check-mark.jpg");
        background-repeat: no-repeat;
        list-style: none outside none;
        padding: 0 0 7px 23px !important;
    }

</style>

<p><img style="margin: 0px 10px 10px; float: left;" alt="a"
        src="http://www.car-myspace-layouts.com/backgrounds/lamborghini/Lambo_gallardo_153_1024x768.jpg" width="97" height="125" /></p>
<p>

<ul class="list-tick">
    <li>Lorem ipsum dolor sit amet,</li>
    <li>consectetur adipiscing elit</li>
    <li>Duis risus magna, vehicula quis faucibus eget, dictum id eros. </li>
    <li>Fusce sed quam a mi accumsan lacinia posuere quis quam.</li>
    <li>Phasellus vel justo urna. Nulla scelerisque posuere nisi, sit amet feugiat est egestas sed.</li>
    <li>Cras id lectus sed sem bibendum luctus sed eu justo.</li>
    <li>Ut vel magna mauris, et hendrerit lectus. Praesent non nulla orci. Sed eget diam et risus pulvinar dapibus porta ac nisi. </li>
    <li>Aliquam blandit orci a mi volutpat sagittis. Donec lorem ligula, rutrum a scelerisque quis, sollicitudin ut lorem. </li>
    <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </li>
</ul>

Answer 1

问题是您正在使用背景图像作为图标。块级元素仍然存在于图像后面，刚刚添加了填充以防止它们与浮点重叠。你可以看到我在这个例子中做了。注意蓝色和红色边框。这些对应于p和您的ul

http://jsfiddle.net/QdDpk/1/

我认为您无法动态放置背景图像。我会用图像作为子弹。我从来没有听说过这些是不可靠的，但如果你有这个分享的来源呢。

Answer 2

嗯，我想我已经想出了一个有效的解决方案。我对您的HTML进行的唯一修改是在每个<span>元素中添加<li>标记。

现场直播：http://jsfiddle.net/Wexcode/7C6rg/

p { 
    float: left; 
    margin: 0 23px 0 0; }
ul.list-tick { 
    list-style: none;
    padding: 0 0 0 23px; }
ul.list-tick li span {
    background: url("http://www.psc-cfp.gc.ca/ppc-cpp/images/small-check-mark.jpg") 0 0 no-repeat;
    padding: 0 0 7px 23px;
    margin: 0 0 0 -23px; }

HTML：

<p><img alt="a"
src="http://www.car-myspace-layouts.com/backgrounds/lamborghini/Lambo_gallardo_153_1024x768.jpg" width="97" height="125" /></p>
<ul class="list-tick">
    <li><span>Lorem ipsum dolor sit amet,</span></li>
    <li><span>consectetur adipiscing elit</span></li>
    <li><span>Duis risus magna, vehicula quis faucibus eget, dictum id eros.</span></li>
    <li><span>Fusce sed quam a mi accumsan lacinia posuere quis quam.</span></li>
    <li><span>Phasellus vel justo urna. Nulla scelerisque posuere nisi, sit amet feugiat est egestas sed.</span></li>
    <li><span>Cras id lectus sed sem bibendum luctus sed eu justo.</span></li>
    <li><span>Ut vel magna mauris, et hendrerit lectus. Praesent non nulla orci. Sed eget diam et risus pulvinar dapibus porta ac nisi.</span></li>
    <li><span>Aliquam blandit orci a mi volutpat sagittis. Donec lorem ligula, rutrum a scelerisque quis, sollicitudin ut lorem.</span></li>
    <li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span></li>
</ul>

用图像周围的背景复选标记包裹ul列表

2 个答案: