tag - ul li css style example
Haga que<li> se ajuste al ancho de<ul> con CSS (5)
Como el número de cuentas puede cambiar, solo puedo pensar en lograr esto con javascript / jquery como sugirió. Solo divide 100 por el número de li y establece el ancho en cada uno.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css(''width'', width + "%");
Probablemente tengas que jugar con el ancho dependiendo del relleno y lo que no.
Como nota al margen, si no lo has hecho aún, te recomiendo obtener una herramienta como firebug , que te permitirá editar css y ejecutar js sobre la marcha. Es infinitamente útil para afinar las apariencias.
Estoy tratando de hacer que el <li> ajuste al ancho del <ul> pero incluso con el width:auto no funciona en absoluto, y no sé por qué. Intenté usar display:inline-block pero esto es lo mismo. No sé cuántas pestañas tendré así que es por eso que no estoy usando un porcentaje directamente.
Me gustaría mostrar la lista en línea cuando visualizo la página en un escritorio y visualizo una li por línea cuando estoy en un teléfono inteligente (con consultas en los medios).
Tengo esto:
<ul id=''menu''>
<li class="button"><a class=''current'' href=''http://''>Home</a></li>
<li class="button"><a href=''http://''>Products</a></li>
<li class="button"><a href=''http://''>Support</a></li>
<li class="button"><a href=''http://''>Contact</a></li>
<li class="button"><a href=''http://''>Contact</a></li>
</ul>
y mi CSS se ve así:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
He encontrado esta manera de tratar con una sola línea de ancho completo ul donde una cantidad indefinida de elementos li debe espaciarse de manera uniforme:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Básicamente, emula una tabla. Funciona en Gecko, Webkit, IE8 +. Para IE7 y hacia abajo deberías usar algunos hacks de bloque en línea :)
Si desea llenar el ancho de <ul> con los cinco <li> s, tendrá que darles a esos <li> un ancho del 20% cada uno.
Tenga en cuenta que necesita cambiar algunos otros detalles del CSS si desea que esto funcione; Por ejemplo, con una display:inline-block usted hace los espacios entre el recuento <li> , por lo que el ancho total del contenido <ul> será más del 100% de ancho. Sugeriría eliminar la display:inline-block y darles float:left .
Editar: ¿O quieres que se distribuyan proporcionalmente según su contenido? Ese sería un desafío diferente.
prueba debajo de css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
ver captura de pantalla:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>