Question

我正在尝试使用子弹创建看起来像LI的布局，但不使用LI。我不能使用LI，因为我想允许同一列表中的不同项目具有不同的子弹图像。而且据我所知，LI子弹样式只能在UL中设置，因此同一UL中的所有LI必须具有相同的子弹图像......我不希望如此。如果我对李的样式有误，请纠正我。

这是我试图设计的HTML，以便重新创建LI子弹。

<div><img src="..."/><p>Inbox:</p></div>

我不确定如何最好地实现以下目标：

在项目文本框的左侧显示项目符号图像，以便当有大量文本时，项目符号在左边距中挂起。文字不应包裹在子弹图像下。
使子弹图像与第一行文本保持对齐（在文本换行的情况下）。当文字改变大小时，保持子弹中间对齐。

我的高级目标是在网页中重新创建TaskPaper's用户界面：

我很乐意通过我最喜欢的解决方案向该人提供免费许可。

谢谢，

杰西

Answer 1

您可以使用CSS类来执行此操作：

<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>

如果您需要任意图像，请转到LI.whatever { list-style: url(myimage.png) }

Answer 2

您可以使用 span 作为替代

<span><img src="">text</img></span>

或者您可以使用默认ul 但每个li的图像

<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>

然后使用css

对齐每个图像的边距

li img{margin-left: 5px}

是的，就像那样

Answer 3

你也可以使用list-style-type：none;然后使用背景图片

Answer 4

如果你不想制作一个清单，并且需要在链接中放置项目符号，你可以这样做：

<a id="bulletlink" href="">hey</a>

css看起来像这样：

bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}

图像是一个8px×8px的简单黑色圆圈，带有透明背景，您可以为锚点或文本添加填充，使其不与子弹重叠。你显然可以做任何事情，包括div，图像，文本，标题等等......你只需要能够放置背景图像。

Answer 5

@Dels - 你在里面使用带有IMG的LI的例子实际上是可行的，因为你仍然在每个图像前面使用LI元素。效果类似于

＆LT; \ IMG＆GT;东西
＆lt; \ diff img＆gt;更多东西

你仍然有常规的子弹样式，但旁边有一个图像。我认为你试图通过边缘图来覆盖图像，但如果这样可行，我甚至不相信，我相信你必须使用负左边距。

CSS用子弹重建LI，但不使用LI

5 个答案: