将输入复选框放在标签的同一行答案

【问题标题】：place input checkbox in same line of label将输入复选框放在标签的同一行
【发布时间】：2013-07-03 17:42:57
【问题描述】：

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

【问题讨论】：

您应该使用<label> 作为标签而不是 div。

标签： css html input

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

但是，我认为元素的结构必须不同。

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

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

【讨论】：

我使用了带有 css 属性 display:block 的标签，位置为：relative 和 top -35px，它可以工作......非常感谢。

【解决方案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;
}

【讨论】：