como hacer que un texto ocupe el 100% de ancho del div

[skielz]

tengo un div rectangular y dentro hay 26 links del mismo tamaño. Tiene que quedar el mismo espacio exactamente entre link y link y abarcar desde el principio del div hasta el final.

[richicasas]

No entiendo tu duda, acaso el texto se baja a la mitad del div??., acaso quieres que cada link sea una fila y no se alineen uno al lado del otro??

[skielz]

te lo voy a mostrar mas gráfico.
ponele que esto es un div:

|--L---L---L---L---L--------------|

las L serían los links. Como podes ver, llegan hasta la mitad del div, de izquierda a derecha. Yo quiero que esas mismas L (osea, el mismo numero de L) ocupen todo el div pero con el mismo espacio entre L y L. para que quede asi:

|---L-----L-----L-----L-----L-----|


Ahora se entiende?

[richicasas]

Si, pero entonces tendrias que mostrarnos el codigo que tienes, pues lo logico es que se ocupe todo el espacio del div a menos que por CSS haya alguna restriccion.

[skielz]

Código:

<div id="menu">
<li><a href="">A</li>
<li><a href="">B</li>
<li><a href="">C</li>
<li><a href="">D</li>
<li><a href="">E</li>
<li><a href="">F</li>
<li><a href="">G</li>
<li><a href="">H</li>
<li><a href="">I</li>
<li><a href="">J</li>
<li><a href="">K</li>
<li><a href="">L</li>
<li><a href="">M</li>
<li><a href="">N</li>
<li><a href="">O</li>
<li><a href="">P</li>
<li><a href="">Q</li>
<li><a href="">R</li>
<li><a href="">S</li>
<li><a href="">T</li>
<li><a href="">U</li>
<li><a href="">V</li>
<li><a href="">W</li>
<li><a href="">X</li>
<li><a href="">Y</li>
<li><a href="">Z</li>
</div>

ese seria el div. Quiero hacer el típico menu horizontal de busqueda alfabético.

esto es en CSS:

Código:

#menu {
height:27px;
float:left;
width:750px;}
#menu li {
font-size:23px;
float:left;
list-style:none;}

[richicasas]

Pues probe el codigo en firefox y me sale bien, todas las letras en la misma linea.

[skielz]

SI, el problema no es que no esten en la misma linea.
El problema es que quiero que las letras lleguen desde la punta izquierda hasta la punta derecha del div.

[skielz]

intenté hacerlo usando

a {margin 0px 10xpx;}

pero en Internet explorer no se por que le da mas margen que en firefox y chrome

[richicasas]

Pues la unica opcion seria que se maneje un numero determinado de links y se sepa el ancho de los mismos para establecer margenes y abarcar el div. De resto por obra y gracia del espiritu santo eso no abarca.
Ahora, si el problema es que el siguiente link es muy grande y baja dejando un espacio en el lado derecho puedes usar la propiedad text-align:justify;.

[sanxuan]

Como tienes un ancho fijo en el div, se puede calcular cuánto debe ocupar cada elemento de la lista. Por cierto, en tu código faltaba la etiqueta <ul> para englobar los <li>.
Yo he cogido la calculadora y me sale un ancho del 3.846% para cada uno de los li.
Puedes hacer el cálculo también si lo prefieres dejar en píxeles.
Además he centrado el texto de los li para que el espacio quede mejor repartido.
Seguro que hay otras opciones.

Código CSS:

#menu {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    height: 27px;
    width: 750px;
}
#menu li {
    float: left;
    font-size: 23px;
    list-style: none outside none;
    margin: 0;
}
#menu li {
    background: none repeat scroll 0 0 #DDDDDD;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 3.846%;
}
#menu ul {
    margin: 0;
    padding: 0;
}
 

[skielz]

lo solucione empleando el uso de una tabla, cada link lo aloje en cada celda de la tabla (horizontal) y a la tabla le di un width:100%

Gracias por sus respuestas

[jomaruro]

Hola:

Iniciado por skielz

lo solucione empleando el uso de una tabla, cada link lo aloje en cada celda de la tabla (horizontal) y a la tabla le di un width:100%

Mal hecho, las tablas no deben usarse para maquetación.

Saludos.

[skielz]

Mal hecho, las tablas no deben usarse para maquetación.

por?

[jomaruro]

Hola:

Porque según los estándares w3c las tablas son para tabular datos, por ejemplo extraidos de una base de datos, para maquetar se utiliza css.

Saludos.

[skielz]

mmm... pero me quedo como quería! que problema puede haber.?