时间戳

首页 > 解决方案 > 自定义项目符号图标

使用 CSS 的标签不起作用

html - 自定义项目符号图标
使用 CSS 的标签不起作用

问题描述

<dt>我想使用 CSS 为标签添加带有自定义项目符号图标的描述列表。我尝试了几种方法，但它不起作用。因为<'li'>它正在工作，但它不适用于<dt>标签。

我尝试了几种方法，包括list-style-image,list-style-type和内联方法。我想使用 CSS 对其进行格式化，因为有几个<dl>列表。

dt { list-style-image: url("icon.png"); }
<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>

我希望自定义图像作为标签的要点<dt>，但我尝试的方法根本没有显示任何内容。

标签： htmlcss

解决方案

<dl>s 和他们的孩子不能被样式化为<ul>/<ol>s。

一种方法是在 中添加另一个 HTML 元素<dl>并使其充当图标。

dt::before {
  content: url('https://www.gravatar.com/avatar/ce2677d0d36f4b4d4d17d1cc569d0375?s=32&d=identicon&r=PG&f=1');
  width: 32px;
  height: 32px;
  margin-right: 5px;
}


/** Apply some margin left to all dd, as we the image moves the dt a little bit to the right **/

dd {
  margin-left: 47px;
  /** we get the icon's width (see above) + its margin right + add some 10px more**/
}
<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>

另一种方法是将每个都包装<dl>在 a 中<ul>并为其设置样式<li>，但我不建议这样做，因为它不是一个非常语义化的 HTML。:)

不过，这里有一个例子：

ul li {
  list-style-image: url('https://www.gravatar.com/avatar/ce2677d0d36f4b4d4d17d1cc569d0375?s=32&d=identicon&r=PG&f=1');
}
<ul>
  <li>
    <dl>
      <dt><a href="#">Topic 1</a></dt>
      <dd>short description</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><a href="#">Topic 2</a></dt>
      <dd>short description 2</dd>
    </dl>
  </li>
</ul>

推荐阅读