CSS为可点击的项目符号图像重建UL LIs

我试图创建一个真实/自然的CSS ulli列表（没有JQuery、Javascript等），但我想隐藏列表样式类型，并使用我自己的图像作为项目符号。此外，我希望子弹是超链接；这就是为什么我没有在LI标签中使用图像。因此，我很难用缩进等方式重现真正的UL LI。下面是我的JS提琴：

下面的第一个屏幕截图是我的代码当前的样子。下面的第二个屏幕截图是一个假设的Photoshop图像，我希望它看起来如何。我想谈谈这些想法：

1.）蓝色盒子需要是液体

2.）蓝色框需要放在红色框旁边（就像我第二张截图中的最后一颗子弹）

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

4.）所有文件都将放在一个分区中（例如黄色分区），内容（LI文本）将是流动的

有没有关于如何修复的想法？我在每个项目符号图像和项目符号文本周围使用包装器。我只是不确定是否应该使用float:left、display:inline block、clear:both；等等等等

当前

问题：

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

我的目标

---

您不需要所有这些内部div。。。。您只需将一个类应用于项目符号图像的锚点。还要注意，不能将同一ID分配给多个项目。每页只有一个ID。没有id应该出现多次

---

更新的fiddle------->

您不需要所有的内部div。。。。您只需将一个类应用于项目符号图像的锚点。还要注意，不能将同一ID分配给多个项目。每页只有一个ID。没有id应该出现多次

更新的提琴------->

好了：

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

你应该保持简单：

<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>

body，a{color:#fff；}
#页面框{宽度：1300px；背景：#ccc；}
#pagebox li{行高：1.5em；列表样式类型：无；}
#页面框ul li img，ul li img{垂直对齐：文本底部；}
#页面框ul li ul{
填充：0 20px；
}
.bullet{
背景：#FF0000 url（'http://images-4.findicons.com/files/icons/1689/splashy/16/bullet_blue.png'）不重复2px 5px；
清除：左；
显示：块；
浮动：左；
填充：0 20px；
}

好了：

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

你应该保持简单：

<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>

body，a{color:#fff；}
#页面框{宽度：1300px；背景：#ccc；}
#pagebox li{行高：1.5em；列表样式类型：无；}
#页面框ul li img，ul li img{垂直对齐：文本底部；}
#页面框ul li ul{
填充：0 20px；
}
.bullet{
背景：#FF0000 url（'http://images-4.findicons.com/files/icons/1689/splashy/16/bullet_blue.png'）不重复2px 5px；
清除：左；
显示：块；
浮动：左；
填充：0 20px；
}

抱歉，但很难理解您想要实现的目标-您的问题与您添加的图片不匹配，请重新措辞您在小提琴中多次使用ID。抱歉，但很难理解您想要实现的目标-您的问题与您添加的图片不匹配，请重新措辞您在小提琴中多次使用ID。如果他需要与小提琴中的项目符号和文本不同的链接，则无效。@Scott他可能不是这个意思。谢谢您的帖子！这很好，但我想知道我是否可以在链接（不是超链接）旁边添加一些描述性文本，这些文本也将遵循UL通常遵循的缩进规则。这是你的小提琴的最新版本：@webdude77当然可以。我用A是因为我以为你想把所有东西都联系起来。将其替换为div，然后仅对内容使用该div内的锚定。它应该看起来像

东西更多的东西

明白了吗？嗨，汤姆：你的建议很管用。如果图像和链接文本指向同一个链接，它似乎工作得很好。我需要在项目符号上有一个唯一的链接，在同一个LI中有另一个指向不同超链接的唯一链接。我们如何使项目符号转到1 href，而文本链接转到另一个a第2 href？此外，我想我已经知道了如何在与我的项目符号相同的位置设置一个输入复选框。如果他需要像小提琴一样将项目符号和文本作为不同的链接，那么这将不起作用。@Scott他可能不是这个意思。谢谢你的帖子！这很好，但我想知道我是否可以在链接（不是超链接）旁边添加一些描述性文本，这些文本也将遵循UL通常遵循的缩进规则。这是你的小提琴的最新版本：@webdude77当然可以。我用A是因为我以为你想把所有东西都联系起来。将其替换为div，然后仅对内容使用该div内的锚定。它应该看起来像

东西更多的东西

明白了吗？嗨，汤姆：你的建议很管用。如果图像和链接文本指向同一个链接，它似乎工作得很好。我需要在项目符号上有一个唯一的链接，在同一个LI中有另一个指向不同超链接的唯一链接。我们如何使项目符号转到1 href，而文本链接转到另一个a第2 href？此外，我想我已经知道了如何在与我的项目符号相同的位置设置一个输入复选框。这似乎是一个很好的解决方案。这对我不太管用，因为绝对的