meta #1

by toubia95

HTML

<div class="spacer"></div>
<h1>Domaines</h1>
<div id="#test">
<label for="d_droit" class="check_mini">Droit</label><input type="checkbox" id="d_droit" name="d_droit" value="1" class="check_mini"/>
</div>
<label for="d_hist" class="check_mini">Histoire</label><input type="checkbox" id="d_hist" name="d_hist" value="1" class="check_mini"/>
<label for="d_litt" class="check_mini">Littérature</label><input type="checkbox" id="d_litt" name="d_litt" value="1" checked="checked" class="check_mini"/>
<label for="d_med" class="check_mini">Médecine</label><input type="checkbox" id="d_med" name="d_med" value="1" class="check_mini"/>
<label for="d_philo" class="check_mini">Philosophie, épistémologie</label><input type="checkbox" id="d_philo" name="d_philo" value="1" class="check_mini"/><div class="spacer"></div>
<label for="d_pol" class="check_mini">Politique</label><input type="checkbox" id="d_pol" name="d_pol" value="1" class="check_mini"/>
<label for="d_scien" class="check_mini">Sciences et techniques</label><input type="checkbox" id="d_scien" name="d_scien" value="1" class="check_mini"/>
<label for="d_relig" class="check_minibr">Religion</label><input type="checkbox" id="d_relig" name="d_relig" value="1" class="check_minibr"/><div class="spacer"></div>
<label for="d_autredom" class="halfbr">Autre</label><input type="text" id="d_autredom" name="d_autredom" value="" class="halfbr"/><div class="spacer"></div>
<label for="d_motcle" class="full">Mots-clé, vedettes Rameau</label><textarea id="d_motcle" name="d_motcle" class="full"></textarea><div class="spacer"></div>
<div class="spacer"></div>

CSS

.my-div-1 {
  background-color: silver;
}
.spacer {
    clear: both;
}
form input, form textarea, form select {
    float: left;
    width: auto;
    margin: 0;
    margin-bottom: 10px;
    font: 16px arial,verdana,sans-serif;
    background: #eee;
    border: solid 1px #000;
    color: #000;
    padding: 5px;
}
input.check_mini, input.check_minibr {
    width: auto;
    margin-top: 8px;
    margin-right: 30px;
}
label {
    display: block;
    float: left;
    width: auto;
    padding: 0;
    padding-right: 5px;
    margin: 0px 0 0;
    text-align: right;
    font-size: 14px;
    padding-top: 6px;
    margin-right: 5px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
}
label.check_mini, label.check_minibr {
    width: auto;
}

JavaScript

$('label.check_mini, label.check_minibr').map(function(index){
  $(this).next().andSelf().wrapAll('<div class="my-div-1">');
});