CSS重新李子弹，但没有使用锂

StackOverflow https://stackoverflow.com/questions/1123393

  •  13-09-2019
  •  | 
  •  

题

我试图建立一个布局，看起来像一个李子弹，但是这并不使用LI。我不能用一个李，因为我想要允许不同的项目，在相同的列表，具有不同的子弹的图像。从什么我可以告诉李子弹风格只能设置在UL，因此，所有李在同一UL必须有同样的子弹图像...我不希望出现这种情况。请纠正我，如果我错了如何李的可能的风格。

这里是HTML，我想到的风格，使它重新创建一个李子弹。

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

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

  • 让子弹图像显示左边的项目文本框所以，当有大量的文本的子弹头挂在左边.案文不应该包裹在子弹的图像。
  • 保留图像子弹对准中的第一行文本(在这种情况下的文本包装).并保持弹中对准当的文本变化大小。

我高水平的目标是重建 TaskPaper的 UI在一个网页：

我将很乐意得到的免费许可证的人的解决方案，我最喜欢的。

谢谢，

杰西

有帮助吗？

解决方案

你可以使用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) }

其他提示

你可以用 跨度 作为替代

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

或者你可以使用 默认ul 但与 不同的图像用于各李

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

然后调整的保证金的每一个图像李使用css

li img{margin-left: 5px}

是啊类似的东西

你也可以使用的表格类型：无；然后使用的背景图像

如果你不想做名单，并需要把子弹在一个链接可以使这样的：

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

css会是这样的：

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

图像是一个简单的黑色圆圈的8px通过8px有一个透明的背景以及你给锚或文字填补所以它不会重叠的子弹。你显然可以这样做很多东西，包括div、图片、文字、标题，等等。你只需要能够把一个背景图像。

@Dels-你的例子使用地雷影响调查与实施指南的内部会的实际工作因为你仍然使用LI件在前的每一个图像。效果会喜欢的东西

  • <\img>的东西
  • <\差异img>更多的东西

你仍然有的常规子弹风格，但是有一个图象旁边。我想你是在试图掩盖，与图像通过保证金-ing，但如果这会的工作，我甚至不相信我认为你必须使用一个负左保证金。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top