css - 将输入复选框放在标签的同一行

Question

我正在努力将输入复选框放置在与标签相同的 x 水平线上。我的复选框位于第二行。我有一个 div，背景是图像，然后是标签，然后是复选框。图像和标签 div 之间的边距以及标签和检查之间的边距需要相同。非常感谢。

<div id="map_Marker_Check_Block">
 <div class="markerDiv"  id="maker_school"><div class="marker_label">School</div> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox"  /> </div> <br />
 <div class="markerDiv"  id="maker_gym"> <div class="marker_label">Gym</div> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
</div>

CSS

#map_Marker_Check_Block {
background-color:yellow;
display:block;
position:absolute;
width:20em;
height:400px;
top:0;
right:0;
z-index:10;
overflow-y:auto;
}

.marker_label {
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}

.marker_ckeckbox {   
float:right; 
}

.markerDiv {
width:19em;
height:48px;
margin-left:5px;
}

#maker_school {  background: url("img1.png") no-repeat; }

#maker_gym{   background: url("img2.png") no-repeat;   }

Answer 1

http://jsfiddle.net/XUErp/

.marker_label {
    float:left;
    margin-left:50px;
    line-height:48px;
    width:130px;
    background-color:green;
}
.marker_ckeckbox {
    margin-top:15px;
    float:right;
}