El icono de viñeta personalizado para la etiqueta <dt> usando CSS no funciona

Question

Quiero agregar una lista de descripción con un icono de viñeta personalizado para la etiqueta <dt> usando CSS. Intenté varios métodos, pero no funciona. Para <'li'> está funcionando, pero no funcionará con la etiqueta <dt>.

Probé varios métodos, incluidos list-style-image, list-style-type y métodos en línea. Quiero formatearlo usando CSS, porque hay varias listas <dl>.

dt { list-style-image: url("icon.png"); }

<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>

Quiero la imagen personalizada como viñeta para las etiquetas <dt>, pero no muestra nada en absoluto con los métodos que probé.

html css

0

DisuraRandunu 27 oct. 2019 a las 09:48

Answer 1

Como un enfoque alternativo a la respuesta principal, lo que estaba tratando de hacer es posible, pero solo funciona en elementos con display: list-item, que dt no tiene por defecto. Entonces agrega eso. Además, la viñeta está a la izquierda del elemento, por lo que debe agregar algo de relleno para evitar que quede fuera de la ventana gráfica. Eso es todo lo que necesitas cambiar.

dt {
  list-style-image: url('https://placehold.it/10x10');
  display:list-item;  /* to make it work */
  margin-left:2em;    /* to make it visible */
}

<dl>
  <dt><a href="#">Topic 1</a></dt>
  <dd>short description</dd>
</dl>

1

Mr Lister 27 oct. 2019 a las 07:46

Answer 2

<dl> sy sus hijos no se pueden diseñar como <ul>/<ol> s.

Un enfoque es agregar otro elemento HTML en <dl> y hacer que actúe como un icono.

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>

Otra forma es envolver cada <dl> en un <ul> y diseñar su <li>, pero no lo recomiendo, ya que no es un HTML muy semántico. :)

Aquí hay un ejemplo, sin embargo:

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>

1

Ivanka Todorova 27 oct. 2019 a las 07:06

Answer 3

Propiedad de imagen de estilo de lista para pantallas de elementos de lista. Entonces, si usa esta propiedad, la visualización del elemento principal debe ser un elemento de lista.

0

novruzrhmv 27 oct. 2019 a las 07:02

El icono de viñeta personalizado para la etiqueta <dt> usando CSS no funciona

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html