Q:

CKform Checkbox issue

I'm using Ck forms component to build my forms.
Every things works fine, except checkbox, they are not like what is planned.
My question is : how to align them one next to one, and how to match Value/Label of the checkbox?

The html part of checkbox is:
    <p class="ckformsblocplug ckformsbloc_2" id="ckformsbloc_matiere_2"><label class="ckCSSlabel " id="matierelbl" for="matiere"> Mathématiques
</label>
<input class="validate[] ckCSStop10 " name="matiere" type="checkbox" value="Mathématiques">
</p>

The css :
     .ckform {
    margin-top: 10px;
}
.ckformtitleplug {
    border-bottom: 1px solid #dddddd;
}
.ckformsblocplug {
    line-height: 1.0em;
    margin: 0;
}
.ckformslabel {
    margin: 5px 0;
    width: 30%
}
.ckform div.fc-error {
    border: none;
    background:none;
    float:left;
    margin-right: 5px;
    padding: 0px;
}
.ckform input { 
    border: 1px solid #999;
    padding: 5px;
}
/* CSS layout */
.ckCSSlabel {
    display: block;
    float: left;
    margin-top: 10px;
    width: 20%;
    font-size:1em;
}
.ckCSSinput {
    width: 76%;
    margin-top: 6px;
    background:none;
}
.ckCSSinput input {
    background:none;
}
/*
.ckCSSclear {
    margin: 0px;
    padding: Opx;
    clear: both;
}
*/
.ckCSSFloatLeft {
    float: left;
}
.ckCSSbot10 {margin-bottom: 10px;}
.ckCSSbot5 {margin-bottom: 5px;}
.ckCSStop10 {margin-top: 1px;}
.ckCSScenter {
    text-align:center;
    margin-top: 10px;
}
/* Ajout de styles personnels pour fichier SQL exemple */
.ckCSSlabel {
    width: 120px;   
}
.ckCSSinput {
    /*width: auto;*/
}
.ckformsbloc_1 {
    float: left;
   width: 100%;
}

I want that this group is shown like this :

[checkbox] Mathématiques 
[checkbox] Physiques-Chimie
[checkbox] SVT
[checkbox] Français
Or  
[checkbox] Mathématiques      [checkbox] Physiques-Chimie        [checkbox] SVT        [checkbox] Français

A:

Well, check below one approach, although the html of your form is not ideal and I see there are multiple same ids for your elements. 
The CSS code below should work on the current page (unless I forgot to paste anything here), but it could be better if you would have the possibility to improve the mark-up of the form adding more elements/ classes and different ids on the elements.
Try by adding the following css in your template's css at the end, and let us know how this goes. In any case this can be a starting point for you, to make it work the way you want.
// Updated:
p#ckformsbloc_matiere_2 {
 display: block;
 float: left;
 width: 150px;  /*** Changed from width: 22%; ***/
 margin-right: 20%;  /*** Changed from margin-right: 25%; ***/
}

#ckformsbloc_matiere_2.ckformsbloc_2 label {
 float: right;
 margin-top: 3px;
}

input[type='checkbox'].ckCSStop10 {
float: left;
}

.ckBtnCon {
 width: 100%;
 float: none;
 clear: both;
 padding-top: 20px;
}

