CSS为可单击的项目符号图像重新创建UL LI

Question

我正在尝试创建真实/自然的CSS UL LI列表（没有JQuery，Javascript等），但是我想隐藏list-style-type并将自己的图像用于项目符号。 另外，我希望子弹超链接； 这就是为什么我不使用LI标签内的图像的原因。 因此，我在重新创建带有缩进等的真正UL LI时遇到麻烦。这是我的JS小提琴： http : //jsfiddle.net/zenfiddle/Z5pw4/2/

下面的第一个屏幕截图是我的代码当前的外观。 下面的第二张屏幕截图是我想要的样子的假设Photoshop图像。 我想满足这些想法：

1.）蓝色方框必须流畅

2.）蓝色框需要坐在红色框旁边（例如第二个屏幕截图中的最后一个项目符号）

3.）项目符号图像超链接

4.）所有内容都将放在DIV中（例如黄色的DIV），内容（LI文本）将保持流畅

有关如何解决的任何想法？ 我在每个项目符号图像和项目符号文本周围使用包装器。 我只是不确定是否应该使用float：left，display：inline-block，clear：both; 等等等

当前

问题：

• 蓝色盒子包裹在红色盒子下面（我希望它们并排坐着）
• 蓝色框未延伸到容器的整个宽度。

我的目标

Answer 1

你去了： http : //jsfiddle.net/tomasdev/Z5pw4/9/

如果要在项目符号侧使用蓝色背景，则可以制作更大的图像，并从锚点元素中删除背景位置。

您应该保持简单 ：

<div id="pagebox">

<ul>
    <li><a href="#" class="bullet"><em>My news topic</em></a>
        <ul>
            <li><a href="#" class="bullet">This is a short story</a></li>
            <li><a href="#" class="bullet">This is a longer story, yes it is</a><br></li>
            <li><a href="#" class="bullet">This is the longest story, I do declare, don't you agree?</a><br></li>
        </ul>
    </li>
</ul>

</div>
<style>
body,a {color:#fff; }
#pagebox { width:1300px; background:#ccc;  }
#pagebox li { line-height: 1.5em; list-style-type:none; }
#pagebox ul li img, ul li ul li img { vertical-align:text-bottom; }
#pagebox ul li ul{
    padding:0 0 0 20px;
}
.bullet { 
    background:#FF0000 url('http://images-4.findicons.com/files/icons/1689/splashy/16/bullet_blue.png') no-repeat 2px 5px;
    clear:left;
    display:block;
    float:left;
    padding:0 0 0 20px;
}
</style>

Answer 2

您不需要所有这些内部div。...您只需将一个类应用于子弹图像的锚点即可。 另请注意，您不能将相同的ID分配给多个项目。 每页只有一个ID。 没有ID应该多次出现。

更新小提琴-------> 这里