texto - ¿Cómo alinear elementos de entrada HTML?
como centrar un titulo en html (9)
¿Inicia sus archivos CSS con algunos ajustes básicos? Puede ser útil desactivar el relleno y el margen en todos los elementos. No he probado para ver si esto podría estar afectando elementos de selección / entrada.
Aquí hay un ejemplo de restablecimiento de CSS de Eric Meyer:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Espero encontrar un recurso para alinear elementos de entrada en una página HTML. Me resulta difícil conseguir que un elemento seleccionado y un cuadro de texto tengan el mismo ancho incluso cuando se utiliza el atributo de estilo de ancho, y es aún más difícil en todos los navegadores. Finalmente, las entradas de archivos parecen imposibles de obtener al mismo ancho de navegador cruzado. ¿Hay algunas buenas guías o consejos para lograr esto? Quizás haya algunos atributos de CSS predeterminados que debería establecer.
Además del ancho, yo también establecería el borde y el margen, estos pueden o no influenciar sus controles. Algo como esto puede ayudar:
input, select {
width: 100px;
margin: 0px;
border: 1px solid;
}
Ron también tiene una buena idea.
Descubrí que si configuras el borde del elemento seleccionado y de entrada y el relleno en 0, tienen el mismo ancho. (Probado en Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)
Al colocar 1px border / padding en los elementos de seleccionar e ingresar, el elemento de entrada 2 píxeles se ensancha. Por ejemplo:
<form class="style">
<input name="someInput" />
<select name="options">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
.style select {
width: 100px;
padding: 1px;
border: 1px solid black;
}
.style input {
width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
(select element seems to put border inside, not outside?) */
padding: 1px;
border: 1px solid black;
}
Esto se debe a que con una <entrada>, el borde y el relleno se agregan al ancho (como con la mayoría de los otros elementos). Con un <select>, el borde y el relleno se incluyen en el ancho, al igual que en el antiguo modo IEQuks.
Puede evitar esto aumentando el ancho para tener esto en cuenta:
input { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }
O bien (si puede confiar en la compatibilidad del navegador), puede usar la nueva propiedad de tamaño de caja de CSS3 para que se comporten de forma coherente y dibujar el relleno y el borde fuera del ancho del elemento:
input, select {
width: 200px;
padding: 10px;
border-width:5px;
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
Alternativamente, puede establecer el tamaño del cuadro en el cuadro de borde para hacer que las entradas se comporten como las selecciones, con el relleno dibujado dentro del ancho del cuadro.
Probado en Chrome, IE8, FF
Las entradas de archivos pueden ser fundamentalmente diferentes en todos los navegadores y definitivamente no permiten mucho en cuanto a la personalización, lo que puede ser molesto, pero también entiendo por qué eso es desde una perspectiva de seguridad. Por ejemplo, intente cambiar el texto del botón "examinar" que aparece en la mayoría de los navegadores, o compare la entrada del archivo en Safari con otros navegadores ...
No creo que la idea de Ron funcione ...
caso de prueba:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="styles/reset.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
input, select{
width: 100%;
}
</style>
</head>
<body>
<div style="width: 200px;">
<input type="text">
<select>
<option>asdasd</option>
<option>asdasd</option>
</select>
</div>
</body>
</html>
Esto da como resultado que la entrada sea un px más ancha que la selección (esto probablemente depende del sistema operativo). No estoy seguro de si esto podría lograrse, incluso con el truco de + 5px, ya que el estilo de la selección parece ser dependiente del sistema operativo (al menos el tema de Windows).
Normalmente los pongo dentro de una celda div o tabla (¡horrores! Sé) del ancho que quiero, luego establezco el estilo de selección e ingreso: width al 100% para que llenen el div / cell en el que se encuentran.
Si necesitas desesperadamente {width: 100%; } y no especificado con anchuras en píxeles, entonces jQuery es tu amigo:
$(function () {
var allSelects = $(''input[type="text"], textarea'');
allSelects.css(''width'', (allSelects.width()-6)+''px'');
}
-6 píxeles funciona mejor para mí (FF9), edita como mejor te parezca.
Probé esto en Internet Explorer 7, Firefox 3 y Safari / Google Chrome. Definitivamente veo el problema con <select> y <input type="file"> . Mis hallazgos mostraron que si diseñaba todas las entradas con el mismo ancho, la <select> sería aproximadamente 5 píxeles más corta en todos los navegadores.
El uso de la secuencia de comandos de restablecimiento CSS de Eric Meyer no ayuda con este problema; sin embargo, si simplemente amplías 5 píxeles de tus entradas de selección, conseguirás una alineación muy buena (aunque no perfecta) en los principales navegadores. El único que difiere es Safari / Google Chrome, y parece ser 1 o 2 píxeles más ancho que todos los otros navegadores.
En lo que respecta al <input type="file"> , no tiene mucha flexibilidad con el estilo allí. Si JavaScript es una opción para usted, puede implementar el método que se muestra en el modo peculiar para lograr un mayor control sobre el diseño del control de carga de archivos.
Vea mi ejemplo de trabajo completo a continuación en XHTML 1.0 Strict para una forma típica con anchos de entrada consistentes. Tenga en cuenta que esto no utiliza el truco del 100% de ancho señalado por otros aquí porque tiene el mismo problema con los anchos inconsistentes. Además, no se utilizan tablas para representar el formulario, ya que las tablas solo se deben usar para datos tabulares y no para el diseño.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Form</title>
<style type="text/css">
label, input, select, textarea {
display: block;
width: 200px;
float: left;
margin-bottom: 1em;
}
select {
width: 205px;
}
label {
text-align: right;
width: 100px;
padding-right: 2em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>User Profile</legend>
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text" />
<br class="clear" />
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text" />
<br class="clear" />
<label for="fav_lang">Favorite Language</label>
<select id="fav_lang" name="fav_lang">
<option value="c#">C#</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
</select>
<br class="clear" />
<label for="bio">Biography</label>
<textarea id="bio" name="bio" cols="14" rows="4"></textarea>
<br class="clear" />
</fieldset>
</form>
</body>
</html>