tipos - tablas en html ejemplos

¿Puedo evitar que los cuadros de texto de 100% de ancho se extiendan más allá de sus contenedores? (12)

Digamos que tengo un cuadro de texto que quiero llenar una línea completa. Yo le daría un estilo como este:

input.wide {display:block; width: 100%}

Esto causa problemas porque el ancho se basa en el contenido del cuadro de texto. Los cuadros de texto tienen margen, bordes y relleno de forma predeterminada, lo que hace que un cuadro de texto con un ancho del 100% sea más grande que su contenedor.

Por ejemplo, aquí a la derecha:

¿Hay alguna manera de hacer que un cuadro de texto llene el ancho de su contenedor sin expandirse más allá?

Aquí hay un ejemplo de HTML para mostrar lo que quiero decir:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px} #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;} input.wide {display:block; margin: 0px} input.normal {display:block; float: right} </style> </head> <body> <div id="outer"> <div id="inner"> <input type="text" class="wide" /> <input type="text" class="normal" /> <div style="clear:both;"></div> </div> </div> </body> </html>

Si se ejecuta esto, puede ver mirando el cuadro de texto "normal" que el cuadro de texto "ancho" sobresale del contenedor. El cuadro de texto "normal" flota en el borde real del contenedor. Intento que el cuadro de texto "ancho" llene su contenedor, sin expandirse más allá del borde como lo hace el cuadro de texto "normal".

¿Hay alguna manera de hacer que un cuadro de texto llene el ancho de su contenedor sin expandirse más allá?

Sí: al usar la propiedad CSS3 ''tamaño de caja: border-box'', puede redefinir qué ''ancho'' significa incluir el relleno externo y el borde.

Desafortunadamente, debido a que es CSS3, el soporte no es muy maduro, y como el proceso de especificación aún no se ha terminado, mientras tanto tiene diferentes nombres temporales en los navegadores. Asi que:

input.wide { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

La alternativa de la vieja escuela es simplemente poner una cantidad de ''relleno'' en el elemento <div> o <td> que lo rodea igual a la cantidad de relleno / borde izquierdo y derecho adicional en ''px'' que cree que los navegadores dar la entrada. (Típicamente 6px para IE <8)

¡Esto resolvió mi problema!

Sin la necesidad de un div externo. Simplemente apliquelo a su cuadro de texto dado.

box-sizing: border-box;

Con esta propiedad "Las propiedades de ancho y alto (y propiedades min / max) incluyen contenido, relleno y borde, pero no el margen"

Vea la descripción de la propiedad en w3schools .

¡Espero que esto ayude a alguien!

En realidad, es porque CSS define el 100% en relación con todo el ancho del contenedor, incluidos sus márgenes, bordes y relleno; eso significa que el espacio disponible. a su contenido es una cantidad menor que el 100%, a menos que el contenedor no tenga márgenes, bordes o relleno.

Esto es contrario a la intuición y ampliamente considerado por muchos como un error con el que ahora estamos atrapados . Significa efectivamente que% las dimensiones no son buenas para nada que no sea un contenedor de nivel superior, e incluso entonces, solo si no tiene márgenes, bordes o relleno.

Tenga en cuenta que los márgenes, bordes y relleno del campo de texto se incluyen en el tamaño de CSS especificado para él; es el contenedor el que tira cosas.

He trabajado bastante con el 98%, pero esa es una solución menos que perfecta, ya que los campos de entrada tienden a ser más cortos a medida que el contenedor se hace más grande.

EDITAR: Me encontré con esta pregunta similar : nunca he intentado con la answer dada, y no estoy seguro si se aplica a su problema, pero parece que sí.

Esto funciona:

<div> <input type="text" style="margin: 5px; padding: 4px; border: 1px solid; width: 200px; width: calc(100% - 20px);"> </div>

El primer ''ancho'' es una regla alternativa para navegadores más antiguos.

Lo que podría hacer es eliminar los "extras" predeterminados en la input :

input.wide {display:block; width:100%;padding:0;border-width:0}

Esto mantendrá la input dentro de su contenedor. Ahora, si desea los bordes, ajuste la input en un div , con los bordes establecidos en el div (de esa manera puede quitar la display:block de la input también). Algo como:

<div style="border:1px solid gray;"> <input type="text" class="wide" /> </div>

Editar: Otra opción es, en lugar de eliminar el estilo de la input , compensarlo en el div envuelto:

input.wide {width:100%;} <div style="padding-right:4px;padding-left:1px;margin-right:2px"> <input type="text" class="wide" /> </div>

Esto le dará resultados algo diferentes en diferentes navegadores, pero no se superpondrán al contenedor. Los valores en el div dependen de qué tan grande es el borde en la input y cuánto espacio desea entre la input y el borde.

Si no necesita hacerlo dinámicamente (por ejemplo, su forma es de un ancho fijo) puede simplemente establecer el ancho de los elementos secundarios <input> al ancho de su contenedor menos cualquier decoración como relleno, margen, borde, etc .:

// the parent div here has a width of 200px: .form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] { font-size: 16px; height: auto; display: block; width: 280px; margin-bottom: 15px; padding: 7px 9px; }

Si no puede usar box-sizing:border-box puede intentar eliminar el width:100% y poner un atributo de gran size en el elemento <input> , sin embargo, tiene que modificar el html, y no puede hazlo solo con CSS:

<input size="1000"></input>

Si no puede usar el tamaño de la caja (por ejemplo, cuando convierte HTML a PDF usando iText). Prueba esto:

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } .input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

<div class="input-wrapper"> <input type="text" value="" name="city"/> </div>

Simplemente ajuste la entrada para compensar el relleno extra. En el siguiente ejemplo, el relleno en la entrada sería 10px a la izquierda y derecha para un desplazamiento de relleno total de 20px:

input[type=text]{ width: calc(100% - 20px); }

Solo me encontré con este problema, y la única solución que pude encontrar que funcionó en todos mis navegadores de prueba (IE6, IE7, Firefox) fue la siguiente:

Envuelva el campo de entrada en dos DIV separados
Establezca el DIV externo al ancho 100%, esto evita que nuestro contenedor se desborde del documento
Coloque relleno en el DIV interno de la cantidad exacta para compensar el desbordamiento horizontal de la entrada.
Establezca un relleno personalizado en la entrada para que desborde por la misma cantidad que permití en el DIV interno

El código:

<div style="width: 100%"> <div style="padding-right: 6px;"> <input type="text" style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999" /> </div> </div>

Aquí, el desbordamiento horizontal total para el elemento de entrada es 6px - 2x (relleno + borde) - por lo que establecemos un relleno a la derecha para el DIV interior de 6px.

Una solución que puede funcionar (me funciona) es aplicar margen negativo en la entrada (cuadro de texto) ... o ancho fijo para ie7 o para soltar soporte ie7. Esto da como resultado un ancho perfecto de píxeles. Para mí es 7, así que agregué 3 y 4, pero sigue siendo perfecto para píxeles.

¡Tenía el mismo problema y odiaba tener divs adicionales para el borde, etc.!

¡Aquí está mi solución que parece funcionar!

Debería usar una hoja de estilo ie7 solo para evitar las starhacks.

input.text{ background-color: #fbfbfb; border : solid #eee 1px; width: 100%; -box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px; *line-height:32px; *margin-left:-3px; *margin-right:-4px; display: inline; padding: 0px 0 0 5px; }

el soporte de tamaño de caja es bastante bueno: http://caniuse.com/#search=box-sizing

Entonces, a menos que tengas como objetivo IE7, deberías ser capaz de resolver este tipo de problemas usando esta propiedad. Una capa como sass o menos facilita el manejo de reglas prefijadas como esa, por cierto.