web-dev-qa-db-fra.com

Alignement vertical paires de paires/étiquettes

Je passe en revue les articles sur ce sujet dans Stack Overflow, mais rien ne fonctionne vraiment pour moi. J'ai le code CSS suivant pour aligner verticalement la paire case à cocher/étiquette:

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;
}

Le code HTML complet est ici .

Les paires case à cocher/étiquette sont correctement centrées verticalement dans Safari (5.0.3) et Firefox (3.6.13) sous Mac OS X. Sous Chrome (Mac OS X), les cases à cocher apparaissent légèrement en haut. Sous Windows, les cases à cocher et les étiquettes associées sont alignées sur le bas (de manière cohérente sur les différents navigateurs: Firefox, Safari, Chrome et Internet Explorer 8).

Quelqu'un pourrait-il m'expliquer s'il vous plaît pourquoi cette différence entre les navigateurs/OS se produit (et aussi comment les éviter)?

Mise à jour

La case à cocher pour aligner verticalement la case à cocher avec l'étiquette dans Chrome sous Mac est la suivante:

input[type=checkbox] {
    position: relative;
    top: 1px;
}

Maintenant besoin d'implémenter des conditions spécifiques au système d'exploitation et au navigateur ...

htmlcsscross-browsercross-platformvertical-alignment
18
Andrej

une autre solution:

.checkbox{
vertical-align:-3px;
}

note: c'est simple. Mais cela ne fonctionne pas toujours bien si la taille de la police de l'étiquette est trop grande.

13
Fmy

Voici comment je l'ai finalement fait:

label input[type=checkbox] {
    margin-top: 5px;
}
2
llundin

Peut-être que les marges/marges par défaut sur le <input> sont en train de tout gâcher?

2
Neil
<!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>
1
Anik
.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>
0
Phil Jackson