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

Question

我正在努力将输入复选框放置在与标签相同的 x-horizo​​ntal 行中。我的复选框放在第二行。我有一个带有背景的 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

对复选框使用 TOP 和 POSITION 样式：

.marker_ckeckbox {
    float: right;
    position: relative;
    top: -35px;
}

但是，我认为元素必须以不同的方式构建。

或者正如 Musa 所说，使用标签而不是 div：

示例：http: //jsfiddle.net/qaprB/1/

Answer 2

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;
}

Answer 3

试试这个

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

css

.marker_ckeckbox {   
 float:right; 
 position: relative;
 top: -35px;
}

.marker_label {    
   display:block;
}