quitar - ul sin viñetas html
cómo ocultar<li> viñetas en el menú de navegación y en los enlaces del pie de página PERO mostrarlos para listar elementos (6)
Combiné algunas de las respuestas de Flavio a esta pequeña solución .
.hidden-ul-bullets li {
list-style: none;
}
.hidden-ul-bullets ul {
margin-left: 0.25em; // for my purpose, a little indentation is wished
}
La decisión sobre las balas se toma en un elemento adjunto, típicamente un div . El inconveniente (o todo) de mi solución es que la eliminación del estilo de lista también se aplica a las listas ordenadas.
Tengo un menú de navegación, un pie de página y una presentación de diapositivas que utilizan el estilo enumerado para enumerar enlaces e imágenes. Tengo el list-style:none; css list-style:none; configurado para ocultar las viñetas junto a los enlaces e imágenes en la navegación y el pie de página, pero quiero mostrar las viñetas para la lista de texto normal.
¿Cómo puedo hacer esto?
Debe definir una clase para las viñetas que desea ocultar. Por ejemplo
.no-bullets {
list-style-type: none;
}
Luego aplícalo a la lista que quieres para las viñetas ocultas:
<ul class="no-bullets">
Todas las demás listas (sin una clase específica) mostrarán los bulltets como de costumbre.
Digamos que estás usando este diseño HTML5:
<html>
<body>
<header>
<nav><ul>...</ul></nav>
</header>
<article>
<ul>...</ul>
</article>
<footer>
<ul>...</ul>
</footer>
</body>
</html>
Se podría decir en su CSS:
header ul, footer ul, nav ul { list-style-type: none; }
Si está utilizando HTML 4, asigne ID a sus DIV (en lugar de usar los nuevos elementos de fancy-pants) y cambie esto a:
#header ul, #footer ul, #nav ul { list-style-type: none; }
Si está utilizando una hoja de estilo de restablecimiento de CSS (como la de Eric Meyer), tendría que devolver el estilo de lista, ya que el restablecimiento elimina el estilo de lista de todas las listas.
#content ul { list-style-type: disc; margin-left: 1.5em; }
El siguiente ejemplo explica cómo eliminar viñetas utilizando una clase de estilo CSS. Puede usar, similar a la clase css, por identificador (#id), por etiqueta principal, etc. De la misma manera que puede usar para definir un css para eliminar viñetas del pie de página.
He utilizado este sitio como punto de partida.
<html>
<head>
<style type="text/css">
div.ui-menu li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Puede li elementos li diferente según su class , su id o sus elementos ancestros:
li { /* styles all li elements*/
list-style-type: none;
}
#ParentListID li { /* styles the li elements that have an ancestor element
of id="ParentListID" */
list-style-type: bullet;
}
li.className { /* styles li elements of class="className" */
list-style-type: bullet;
}
O bien, para utilizar los elementos ancestros:
#navigationContainerID li { /* specifically styles the li elements with an ancestor of
id="navigationContainerID" */
list-style-type: none;
}
li { /* then styles all other li elements that don''t have that ancestor element */
list-style-type: bullet;
}
También puede definir una clase para las viñetas que desea mostrar , por lo que en el CSS:
ul {list-style:none; list-style-type:none; list-style-image:none;}
Y en el HTML simplemente define qué listas mostrar:
<ul style="list-style:disc;">
O también puedes definir una clase CSS:
.show-list {list-style:disc;}
Luego aplícalo a la lista que quieres mostrar:
<ul class="show-list">
Todas las otras listas no mostrarán las balas ...