html - Comment aligner les cases à cocher et leurs étiquettes uniformément croisées

91

label {   display: block;   padding-left: 15px;   text-indent: -15px; } input {   width: 13px;   height: 13px;   padding: 0;   margin:0;   vertical-align: bottom;   position: relative;   top: -1px;   *overflow: hidden; }

<form>   <div>     <label><input type="checkbox" /> Label text</label>   </div> </form>

84

.checkboxes label {   display: inline-block;   padding-right: 10px;   white-space: nowrap; } .checkboxes input {   vertical-align: middle; } .checkboxes label span {   vertical-align: middle; }

<form>   <div class="checkboxes">     <label><input type="checkbox"> <span>Label text x</span></label>     <label><input type="checkbox"> <span>Label text y</span></label>     <label><input type="checkbox"> <span>Label text z</span></label>   </div> </form>

.checkboxes label {   display: block;   padding-right: 10px;   padding-left: 22px;   text-indent: -22px; } .checkboxes input {   vertical-align: middle; } .checkboxes label span {   vertical-align: middle; }

<form>   <div class="checkboxes">     <label><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>     <label><input type="checkbox"> <span>Label text y</span></label>     <label><input type="checkbox"> <span>Label text z</span></label>   </div> </form>

76

.font2 {font-family:Arial; font-size:32px} /* Sample font */    input[type=checkbox], input[type=radio] {    vertical-align: middle;    position: relative;    bottom: 1px;  }    input[type=radio] {     bottom: 2px;   } 

<label><input type="checkbox" /> Label text</label>  <p class="font2">    <label><input type="checkbox"/> Label text</label>  </p>

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */    input[type=checkbox], input[type=radio] {    vertical-align: middle;     position: relative;    bottom: .08em; /* this is a better value for different fonts! */  }

<label><input type="checkbox" /> Label text</label>     <p class="font2">    <label><input type="checkbox"/> Label text</label>  </p>

63

input {     vertical-align: -2px; } 

51

<form>      <div>          <input id="blah" type="checkbox"><label for="blah">Label text</label>      </div>  </form>