para - Estilo de lista de estilo HTML
lista de codigos css (16)
Aquí está mi versión de fiddle :
El contenido .generatedcontent clase (modernizr) en <html> prácticamente significa IE8 + y todos los demás navegadores.
<html class="generatedcontent">
<ul class="ul-dash hanging">
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
</ul>
CSS:
.ul-dash {
margin: 0;
}
.ul-dash {
margin-left: 0em;
padding-left: 1.5em;
}
.ul-dash.hanging > li { /* remove ''>'' for IE6 support */
padding-left: 1em;
text-indent: -1em;
}
.generatedcontent .ul-dash {
list-style: none;
}
.generatedcontent .ul-dash > li:before {
content: "–";
text-indent: 0;
display: inline-block;
width: 0;
position: relative;
left: -1.5em;
}
¿Hay alguna manera de crear un estilo de lista en HTML con un guión (es decir, o - – o - — ) es decir,
<ul>
<li>abc</li>
</ul>
Salida:
- abc
Se me ha ocurrido hacer esto con algo como li:before { content: "-" }; , aunque no conozco los inconvenientes de esa opción (y estaría muy obligado a recibir comentarios).
Más genéricamente, no me importaría saber cómo usar caracteres genéricos para los artículos de la lista.
Aquí hay una versión sin ninguna posición relativa o absoluta y sin sangrías de texto:
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
Disfrutar;)
CSS:
li:before {
content: ''— '';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
De otra manera:
li:before {
content: ''/2014/00a0/00a0''; /* em-dash followed by two non-breaking spaces*/
}
li {
list-style: none;
text-indent: -1.5em;
padding-left: 1.5em;
}
En lugar de usar lu li, usamos dl (definition list) and dd . <dd> se puede definir con estilo CSS estándar, como {color:blue;font-size:1em;} y usar como marcador cualquier símbolo que coloque después de la etiqueta html. Funciona como ul li, pero le permite usar cualquier símbolo, solo tiene que sangrarlo para obtener el efecto de lista sangrada que normalmente obtiene con ul li .
CSS:
dd{text-indent:-10px;}
HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
Te da un código mucho más limpio! ¡De esa forma, podrías usar cualquier tipo de personaje como marcador! ¡La sangría es de aproximadamente -10px y funciona perfecto!
En mi caso agregando este código a CSS
ul {
list-style-type: ''- '';
}
fue suficiente. Simple como es.
Hay una solución fácil (texto-sangría) para mantener el efecto de la lista sangrada con :before pseudoclase.
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed > li {
text-indent: -5px;
}
ul.dashed > li:before {
content: "-";
text-indent: -5px;
}
Some text
<ul class="dashed">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Last text
Lo que funcionó para mí fue
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
Mi solución es agregar una etiqueta de extensión adicional con mdash en ella:
<ul class="mdash-list">
<li><span class="mdash-icon">—</span>ABC</li>
<li><span class="mdash-icon">—</span>XYZ</li>
</ul>
y agregar a css:
ul.mdash-list
{
list-style:none;
}
ul.mdash-list li
{
position:relative;
}
ul.mdash-list li .mdash-icon
{
position:absolute;
left:-20px;
}
No sé si hay una manera mejor, pero puede crear un gráfico de punto de viñeta personalizado que represente un guion, y luego dejar que el navegador sepa que desea usarlo en su lista con la propiedad de list-style-type . Un ejemplo en esa página muestra cómo usar un gráfico como viñeta.
Nunca he intentado usar: antes de la manera en que lo haces, aunque puede funcionar. La desventaja es que no será compatible con algunos navegadores más antiguos. Mi reacción instintiva es que esto sigue siendo lo suficientemente importante como para tener en cuenta. En el futuro, esto puede no ser tan importante.
EDITAR: He realizado algunas pruebas con el enfoque del OP. En IE8, no pude lograr que la técnica funcionara, por lo que definitivamente aún no es un navegador cruzado. Además, en Firefox y Chrome, parece que se ignora la configuración de list-style-type en none conjuntamente.
Para cualquiera que tenga este problema hoy, la solución es simple:
estilo de lista: "- "
Permítanme agregar mi versión también, sobre todo para que pueda encontrar mi propia solución preferida de nuevo:
ul {
list-style-type: none;
/*use padding to move list item from left to right*/
padding-left: 1em;
}
ul li:before {
content: "–";
position: absolute;
/*change margin to move dash around*/
margin-left: -1em;
}
`` `
Puede usar :before y content: teniendo en cuenta que esto no es compatible con IE 7 o inferior. Si estás de acuerdo con eso, entonces esta es tu mejor solución. Consulte las tablas de compatibilidad de CSS de Can I Use o QuirksMode para obtener detalles completos.
Una solución un poco más desagradable que debería funcionar en los navegadores más antiguos es usar una imagen para el punto de viñeta y simplemente hacer que la imagen parezca un guion. Consulte la página W3C list-style-image para ver ejemplos.
Utilizar esta:
ul
{
list-style: square inside url(''data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw=='');
}
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
demo fiddle
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}