vendredi 5 juin 2015

Aligning check-boxes next to labels

I've looked at many, many links trying to figure this one out. Despite trying tonnes of variations of the CSS, I can't for the love of god get checkboxes to 1) align next to the labels instead of above them, 2) appear on the right side of the labels.

My website: http://ift.tt/1ATMgMR

My code

.formula1    {
    margin:auto;
    position:relative;
    max-width:450px;
    height:450px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.inline-field input,
.inline-field label {
  display: inline-block;
  margin-bottom: 0; /* I added this after I posted my reply */
  vertical-align: middle; /* Fixes any weird issues in Firefox and IE */

</style>

<form name="nexus" class="formula1">
<div class="inline-field">
<input type="checkbox" id="chk_1" name="chk_1" value="Fokalneurologi finns" onchange="checkTotal()" /><label for="chk_1">Fokalneurologi finns</label></div>
<div class="inline-field"><input type="checkbox" id="chk_2" name="chk_2" value="Ömhet över spinalutskott" onchange="checkTotal()"/><label for="chk_2">Ömhet över spinalutskott</label></div>
<div class="inline-field"><input type="checkbox" id="chk_3" name="chk_3" value="Påverkat medvetande" onchange="checkTotal()"/><label for="chk_3">Påverkat medvetande</label></div>
<div class="inline-field"><input type="checkbox" id="chk_4" name="chk_4" value="Intoxikering" onchange="checkTotal()"/><label for="chk_4">Intoxikering</label></div>
<div class="inline-field"><input type="checkbox" id="chk_5" name="chk_5" value="Distraherande skada finns" onchange="checkTotal()"/><label for="chk_5">Distraherande skada finns</label></div>
<input type="text" size="50" name="total" value="Röntgen är inte indicerat enl. NEXUS-kriterer"/>
</form>




Aucun commentaire:

Enregistrer un commentaire