html < input > elemento ignora las propiedades CSS izquierda + derecha?

StackOverflow https://stackoverflow.com/questions/450316

  •  19-08-2019
  •  | 
  •  

Pregunta

He notado que el elemento < input > en HTML ignora el par CSS de '' left '' y "derecho" propiedades. Lo mismo para el par '' top '' y "fondo". Vea el código de muestra a continuación: 

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

El < input > debería ocupar casi todo el espacio en el navegador (excepto un borde de 10px a su alrededor). Funciona bien en Safari, pero en Firefox e IE < input > permanece pequeño en la esquina superior izquierda del navegador.

Si uso " left " y "ancho", y "arriba" y "altura", entonces todo funciona bien. Sin embargo, no sé cuál es el ancho y la altura, quiero que se ajusten según el tamaño de la ventana del navegador.

¿Alguna idea de cómo solucionar esto?

Gracias.

¿Fue útil?

Solución

Puedes usar un DIV Wrapper 

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>

Otros consejos

No ignora la izquierda o la parte superior, verás que se posiciona 10px hacia afuera. Lo que sucede es que no se respetan el derecho y el fondo. Los elementos de formulario se tratan un poco especialmente en los motores de diseño, es totalmente posible que FF / IE considere el ancho / longitud máxima de la entrada más importante, realmente no he investigado por qué podría ser eso.

Sin embargo, es algo extraño. Quizás lo que sería mejor hacer es mirar < textarea > que está diseñado para proporcionar una entrada de texto grande, que puede empujar a 100% de dimensiones aplicando ancho: 100% ; height: 100%; y cuide el margen de 10px en un contenedor div.

WFM: 

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>

http://reference.sitepoint.com/css/bottom decir, con respecto a Internet Explorer (< = 6)

  

no admitan la especificación de la posición y las dimensiones de un elemento en una posición absoluta usando arriba, derecha, abajo e izquierda juntas; usarán la última posición vertical y horizontal especificada, y necesitarán que las dimensiones se especifiquen usando ancho y alto

La forma en que se ve en Safari no es cómo debería mostrarse. Debido a que no especificó un valor de altura, la input tendrá el tamaño predeterminado del último tamaño de fuente heredado.

El posicionamiento derecho e inferior también se ignorará porque está intentando establecer los márgenes superior e izquierdo al mismo tiempo. Parece que tienen prioridad en este caso.

Si necesita usar el campo input y hacer que se muestre dentro de todo el ancho y alto de la ventana del navegador en el momento en que se ve, debe rehacer el CSS de esta manera: 

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

Esto estirará el campo input tan alto y ancho como el usuario tenga su ventana de navegador. También tendrá un margen alrededor de cada lado de 10 píxeles desde la ventana del navegador.

Si tiene que tener un margen, configúrelo en el estilo body o en un contenedor DIV alrededor del campo de entrada.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top