Question

我正在努力将输入复选框放在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;   }

Answer 1

使用TOP和POSITION样式复选框：

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

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

或者正如穆萨所说使用标签代替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;
}

将输入复选框放在同一行标签中

CSS

3 个答案:

CSS