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é.
3 respuestas
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>
<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>
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.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].