html - CSS 用元素符号重新创建 LI,但不使用 LI

标签 html css html-lists

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

这是我尝试设置样式以重新创建 LI 元素符号的 HTML。

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

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

  • 将元素符号图像显示在元素文本框的左侧,这样当有很多文本时,元素符号就会卡在左边距中。文本不应换行在元素符号图像下方。
  • 使元素符号图像与第一行文本居中对齐(在文本换行的情况下)。并在文本改变大小时使元素符号居中对齐。

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

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

谢谢,

杰西

最佳答案

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

关于html - CSS 用元素符号重新创建 LI,但不使用 LI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1123393/

相关文章:

html - iframe 100% 高度问题

css - 检查元素和样式编辑器中的不同代码

html - Css float li 但不是 ul

css - 在 li 中具有当前图像的悬停时更改 li 元素的背景

php - 使用 xampp 在 php 中连接 oracle 数据库

javascript - 通过两个不相关的 observableArray 对象构建一个 HTML 表格

html - 根据规范,标题(书籍、电影等)的正确语义 HTML 标记是什么?它是 <em> 标签还是其他什么?

javascript - 如何制作点击链接但不导航到该链接的按钮

css - iframe 覆盖 div 页脚

带有图像的 HTML 列表 - 水平对齐