css - personalizar - Reducir la brecha entre una viñeta y el texto en un elemento de la lista
personalizar viñetas html (14)
¿Cómo puedo reducir la brecha predeterminada entre viñetas y texto en un <li> ?
- Artículo 1
- Artículo 2
- Artículo 3
Quiero reducir la brecha entre la bala y "I".
Aquí hay otra manera.
- Agregue dos divs a cada li, uno para la viñeta y otro para el texto.
- Ponga un carácter de viñeta
•(o lo que quiera, Unicode tiene mucho) en la viñeta. Pon el texto en el texto div. - Configure cada li para
display:flex.
Pros:
- No hay imagen de bala adicional para agregar.
- Sin márgenes negativos ni nada, no saldrá de los padres.
- Funciona en cualquier navegador que admita flexbox.
- Indentación adecuada de elementos multilínea.
- El uso del carácter de viñeta significa que la viñeta siempre estará alineada verticalmente con el texto, sin necesidad de ajustes.
Contras:
- Requiere elementos extra
Además, si no desea codificar manualmente todos los divs adicionales, puede hacer una lista normal y luego ejecutar esta función para transformarla, pasando su ul como parámetro:
function fixList (theList) {
theList.find(''li'').each(function (_, li) {
li = $(li);
$(''<div/>'').html(li.html()).appendTo(li.empty());
$(''<div/>'').text(''•'').prependTo(li);
});
}
Ejemplo:
li {
font-family: sans-serif;
list-style-type: none;
display: flex;
}
li > div:first-child {
margin-right: 0.75ex; /* set to desired spacing */
}
<ul>
<li><div>•</div><div>First list item.</div>
<li><div>•</div><div>Second list item.<br>It''s on two lines.</div>
<li><div>•</div><div>Third <i>list</i> item.</div>
</ul>
Aquí hay un ejemplo usando la función:
fixList($(''ul''));
function fixList (theList) {
$(''li'', theList).each(function (_, li) {
li = $(li);
$(''<div/>'').html(li.html()).appendTo(li.empty());
$(''<div/>'').text(''•'').prependTo(li);
});
}
li {
font-family: sans-serif;
list-style-type: none;
display: flex;
}
li > div:first-child {
margin-right: 0.75ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>First list item.
<li>Second list item.<br>It''s on two lines.
<li>Third <i>list</i> item.
</ul>
Aquí vas con violín:
FIDDLE
HTML:
<ol>
<li>List 1
<ol>
<li>Sub-Chapter</li>
<li>Sub-Chapter</li>
</ol>
</li>
<li>List 2
<ol>
<li>Sub-Chapter</li>
<li>Sub-Chapter</li>
</ol>
</li>
<li>List 3</li>
</ol>
CSS:
ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}
Esta es una forma.
li span {
margin-left: -11px;
}
<ul>
<li><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
He aquí cómo hacerlo.
Multi-line funciona perfectamente si lo haces de esta manera. Bullet se ajustará automáticamente con el texto. Sangría es simple: es solo el padding-left en el li . Se requiere CSS mínimo.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul > li {
position: relative;
padding-left: 12px;
}
ul > li:before {
content: "•";
position: absolute;
left: 0;
}
div {
border: 1px solid #ccc;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
<li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
<li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
</ul>
</div>
He probado estas y otras soluciones que se ofrecen, que en realidad no funcionan, pero parece que he encontrado una manera de hacerlo, y eso es eliminar la viñeta y usar el: antes del pseudo-elemento para poner una viñeta Unicode en su lugar. Luego puede ajustar el espacio entre el elemento de la lista y la viñeta. Debe usar Unicode para insertar una entidad en la propiedad de contenido de: before o: after: las entidades HTML no funcionan.
También se necesita un código de dimensionamiento y posicionamiento, ya que la viñeta de Unicode muestra de forma predeterminada el tamaño de una cabeza de alfiler. Entonces, la bala debe ser ampliada y posicionada para colocarla en su lugar. Tenga en cuenta el uso de ems para el tamaño y el posicionamiento de la bala, de modo que la relación de la bala con el elemento de la lista permanezca constante cuando cambie el tamaño de la fuente del elemento de la lista. Los comentarios en el código explican cómo funciona todo. Si desea utilizar una entidad diferente, puede encontrar una lista de las entidades Unicode aquí:
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
Use un valor de la columna de la derecha (octal) de la tabla en esta página; solo necesita el / y el número. Debería poder destruir todo, excepto la propiedad de contenido de la regla: before cuando use las otras entidades, ya que parecen mostrarse en un tamaño utilizable. Envíeme un correo electrónico: charles at stylinwithcss dot com con cualquier pensamiento / comentario. Lo probé Firefox, Chrome y Safari y funciona muy bien.
body {
font-family:"Trebuchet MS", sans-serif;
}
li {
font-size:14px; /* set font size of list item and bullet here */
list-style-type:none; /* removes default bullet */
position:relative; /* positioning context for bullet */
}
li:before {
content:"/2219"; /* escaped unicode character */
font-size:2.5em; /* the default unicode bullet size is very small */
line-height:0; /* kills huge line height on resized bullet */
position:absolute; /* position bullet relative to list item */
top:.23em; /* vertical align bullet position relative to list item */
left:-.5em; /* position the bullet L- R relative to list item */
}
Necesitaba hacer esto en línea, y combiné algunos de los anteriores para que funcione bien para mí. Estoy trabajando dentro de un div y quería usar una imagen:
El relleno bajo UL le dijo a la viñeta dónde comenzar desde el margen izquierdo del div. Está usando em para una mejor accesibilidad / flexibilidad, pero también puedes usar px. Si no parece moverse mucho con px, use un valor de px mucho más grande (para mí, simplemente moverlo en un cm fue 60 px).
La sangría de texto le dice a la viñeta qué tan cerca está para llegar al texto que está al lado.
¡Espero que funcione para ti! :)
No estoy seguro de si esta es la mejor manera de hacerlo, pero podría especificar un text-indent negativo:
li {
text-indent: -4px;
}
... donde se ve tu código HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
(Probado en Safari 4.0.4 y Firefox 3.0.11.)
Para lograr el aspecto que quería, hice un div que contiene un UL básico y varios LI. No pude ajustar fácilmente la sangría entre la viñeta y el texto con cualquiera de las ideas sugeridas anteriormente (técnicamente posible, pero no simple). Acabo de dejar la UL y la LI sin ninguna característica de listado ( list-style-type: none ) y luego agregando un • al comienzo de cada línea. Me dio un poco de problemas al principio, solo se mostraba la primera viñeta, así que agregué un carácter de viñeta al final de la primera línea, me refrescaron, luego lo quité y todos aparecieron. Solo agregue manualmente una entidad HTML bullet si no desea una sangría enorme, agregue entidades HTML espaciales si desea más espacio: o Sé que no es el mejor método, pero funcionó para mí.
Podrías probar lo siguiente. Pero requiere que coloque un elemento <span> dentro de los elementos <li>
<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;
}
</style>
</head>
<body>
<ul class="a">
<li><span>Coffee</span></li>
<li><span>Tea</span></li>
<li><span>Coca Cola</span></li>
</ul>
</body>
</html>
Puede intentar usar:
li {list-style-position: inside; }
Pero no puedo recordar si eso ajusta el espacio , o cambia donde ocurre el espacio.
Editado Lo anterior no parece hacer ninguna diferencia sustancial. No parece haber ninguna forma de disminuir el espacio entre el marcador del list-style-type y el texto, aunque se puede aumentar usando margin-left o text-indent .
Lo siento, no puedo ser de más uso.
EditadoSolo por curiosidad, ¿qué tal ''fingir'' la bala con una imagen de fondo?
ul {list-style-type: none;
margin: 0;
padding: 0;
}
ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
margin: 0;
padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}
Podría permitir más ajustes.
Puede lograr esto estableciendo list-style-type en none , y estableciendo la background-image de background-image de un elemento list en una viñeta genérica, como esta:
ul {
list-style-type: none;
}
li {
background-image: url(bullet.jpg);
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 7px;
}
El resultado se vería algo así como esto:
Con este enfoque, no está agregando elementos innecesarios de span (u otros) a sus listas, lo cual es posiblemente más práctico (para su posterior extensión y otras razones semánticas).
Reduzca text-indent a un número negativo para disminuir el espacio entre la viñeta del elemento de la lista y su texto.
li {
text-indent: -4px;
}
También puede usar margin-left para ajustar cualquier espacio entre la viñeta del elemento de lista y el borde de su elemento circundante.
li {
margin-left: 24px;
}
Tanto text-indent como padding-left pueden agregar espacio entre la viñeta y el texto, pero solo el text-indent puede reducir el espacio a negativo.
Si en cada li tiene solo una fila de texto, puede poner sangría de texto en li. Me gusta esto :
ul {
list-style: disc;
}
ul li {
text-indent: 5px;
}
o
ul {
list-style: disc;
}
ul li {
text-indent: -5px;
}
Tengo <a> dentro de los <li> s.
Para los elementos <ul> , aplique el siguiente CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
}
Para los elementos <a> , aplique el siguiente CSS:
a:before {
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background: #000;
display: inline-block;
margin: 0 6px 0 0;
vertical-align: middle;
}
Esto crea pseudo elementos para las viñetas. Se pueden diseñar como cualquier otro elemento.
Lo he implementado aquí: http://www.cssdesk.com/R2AvX