html - programacion - Alineación vertical casillas de verificación/pares de etiquetas
etiquetas html (6)
Esta pregunta ya tiene una respuesta aquí:
Repaso las publicaciones sobre este tema en Stack Overflow, pero nada realmente funciona para mí. Tengo el siguiente código CSS para alinear verticalmente la casilla de verificación / par de etiquetas:
body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
fieldset {
line-height: 100%;
}
label {
display: inline-block;
vertical-align: baseline;
}
El código HTML completo está here .
Los pares de casillas / etiquetas están centrados verticalmente correctamente en Safari (5.0.3) y Firefox (3.6.13) en Mac OS X. En Chrome (Mac OS X), las casillas de verificación se representan ligeramente en la parte superior. En el sistema operativo Windows, las casillas de verificación y las etiquetas asociadas están alineadas en la parte inferior (de manera consistente en diferentes navegadores: Firefox, Safari, Chrome e Internet Explorer 8).
¿Podría alguien, por favor, explicarme por qué ocurren estas diferencias entre los navegadores / sistemas operativos (y también cómo evitarlos)?
Actualizar
El truco para alinear verticalmente la casilla de verificación con la etiqueta en Chrome en Mac es el siguiente:
input[type=checkbox] {
position: relative;
top: 1px;
}
Ahora es necesario implementar condicionales específicos del sistema operativo y del navegador ...
Así es como finalmente lo hice:
label input[type=checkbox] {
margin-top: 5px;
}
No tengo idea de por qué los navegadores hacen cosas diferentes, simplemente lo hacen. En cuanto a esto, intentaste display:table-cell; ?
Tal vez los márgenes / relleno predeterminados en la <input> están desordenando las cosas?
otra solución:
.checkbox{
vertical-align:-3px;
}
Nota: es simple. Pero no siempre funciona bien si el tamaño de fuente de la etiqueta es demasiado grande.
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="../images/favicon.ico" />
<style>
.GlobalEntityComboBox {
font-family: Verdana;
font-size: 11px;
padding: 0px;
margin: 0px;
background-color: lightgrey;
border: 1px solid grey;
width: 190px;
}
.GlobalEntityComboBox li {
list-style-type: none;
line-height: 24px;
padding-left: 4px;
padding-right: 4px;
margin-top: 1px;
margin-bottom: 1px;
}
.GlobalEntityComboBox li.checked {
background-color: lightgreen;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
.GlobalEntityComboBox input {
margin: 0px;
padding: 0px;
margin-right: 4px;
vertical-align: middle;
}
.GlobalEntityComboBox span {
vertical-align: middle;
}
</style>
</head>
<body>
<ul class="GlobalEntityComboBox">
<li class="checked"><input type="checkbox" checked/><span>All Servers</span></li>
<li class="checked"><input type="checkbox" checked/><span>Server 1</span></li>
<li class="checked"><input type="checkbox" checked/><span>Server 2</span></li>
<li><input type="checkbox"/><span>Server 3</span></li>
</ul>
</body>
</html>
.flcheck-wrapper
{ overflow:hidden;
margin:5px 0;
}
.flcheck-wrapper p
{ font-size:12px;
display:inline;
float:left;
line-height:20px;
margin:0 0 0 10px;
}
.flcheck-wrapper input[type="checkbox"],
.flcheck-wrapper input[type="radio"]
{ display:inline;
float:left;
margin:0 !imortant;
line-height:20px;
height:20px;
}
<div class="flcheck-wrapper">
<input type="radio" name="foo" value="true" checked="checked" />
<p>Some kind of text</p>
</div>
<div class="flcheck-wrapper">
<input type="radio" name="foo" value="false" />
<p>Some kind of text</p>
</div>