2

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

这是我尝试设置样式的 HTML，以便它重新创建 LI 项目符号。

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

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

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

我的高级目标是在网页中重新创建TaskPaper 的UI：

我很乐意为拥有我最喜欢的解决方案的人提供免费许可证。

谢谢，

杰西

4

5 回答 5

5

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

于 2009-07-14T04:18:18.043 回答
1

你可以使用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 上对齐每个图像的边距

li img{margin-left: 5px}

是的，类似的东西

于 2009-07-14T04:17:20.133 回答
1

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

于 2009-07-14T04:31:26.673 回答
1

如果您不想制作列表并且需要将项目符号放在链接中，您可以这样制作：

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

CSS看起来像这样：

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

图像是一个简单的 8 像素 x 8 像素的黑色圆圈，具有透明背景，您为锚点或文本提供了填充，使其不会与项目符号重叠。您显然可以对几乎所有内容执行此操作，包括 div、图像、文本、标题等……您只需要能够放置背景图像。

于 2012-02-21T20:45:49.213 回答
1

@Dels——您使用带有 IMG 的 LI 的示例实际上可以工作，因为您仍在使用每个图像前面的 LI 元素。效果会是这样的

  • <\img> 东西
  • <\diff img> 更多内容

你仍然有常规的子弹样式，但旁边有一个图像。我认为您试图通过对图像进行边距来覆盖它，但是如果这可行，我什至对此都没有信心，我相信您必须使用负的左边距。

于 2012-04-23T17:02:31.667 回答