CSS为可点击的子弹图像重新创建UL LI

Question

我正在尝试创建一个真正的/自然的CSS UL LI列表（没有JQuery，Javascript等），但我想隐藏列表样式类型并使用我自己的图像作为项目符号。另外，我希望子弹是超链接的;这就是我没有在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。

更新小提琴-------＆gt; HERE