目标效果:
问题出现:
问题代码:
Html代码:
<div id="hall_div_operation">
<div class="hall_operation">
<div class="label_input">
<label for="customroomid">自定义房间号:</label>
<input type="text" id="customroomid" class="form-control" style="width: 194px;"/>
</div>
<a id="EnterRoomBtn" class="btn btn-info">进入</a>
</div>
</div>
CSS代码:
#hall_div_operation{
clear: both;
width: 389px;
height: 60px;
margin-top: 10px;
}
.hall_operation .label_input{
float: left;
font-size: 14px;
padding-left: 10px;
}
.hall_operation .btn{
width: 70px;
float: left;
margin-left: 10px;
}
#EnterRoomBtn{
background: #f7f8f8;
color: #1c90f6;
border: 1px solid #1c90f6;
box-shadow: 0px 0px 2px #1c90f6;
}
问题分析:连续几个内联标签或表单元素的换行在浏览器会被解释为一个空格。
解决方法:
方法一:不换行
<div id="hall_div_operation">
<div class="hall_operation">
<div class="label_input">
<label for="customroomid">自定义房间号:</label><input type="text" id="customroomid" class="form-control" style="width: 194px;"/>
</div>
<a id="EnterRoomBtn" class="btn btn-info">进入</a>
</div>
</div>
方法二:设置父级块的字体大小为0
若其中还有字体需要显示的话,需要用<span>标签去包裹它,然后再设置字体大小。Html代码:
<div id="hall_div_operation">
<div class="hall_operation">
<div class="label_input">
<label for="customroomid"><span class="span_font">自定义房间号:<span></label>
<input type="text" id="customroomid" class="form-control" style="width: 194px;"/>
</div>
<a id="EnterRoomBtn" class="btn btn-info">进入</a>
</div>
</div>
CSS代码:
#hall_div_operation{
clear: both;
width: 389px;
height: 60px;
margin-top: 10px;
}
.hall_operation .label_input{
float: left;
padding-left: 10px;
font-size: 0;
}
.hall_operation .label_input .span_font{
font-size: 14px;
}
.hall_operation .btn{
width: 70px;
float: left;
margin-left: 10px;
}
#EnterRoomBtn{
background: #f7f8f8;
color: #1c90f6;
border: 1px solid #1c90f6;
box-shadow: 0px 0px 2px #1c90f6;
}
方法三:设置 margin-left 为-3px
Html代码:
<div id="hall_div_operation">
<div class="hall_operation">
<div class="label_input">
<label for="customroomid">自定义房间号:</label>
<input type="text" id="customroomid" class="form-control" style="width: 194px;"/>
</div>
<a id="EnterRoomBtn" class="btn btn-info">进入</a>
</div>
</div>
CSS代码:
#hall_div_operation{
clear: both;
width: 389px;
height: 60px;
margin-top: 10px;
}
.hall_operation .label_input{
float: left;
padding-left: 10px;
font-size: 14px;
}
.hall_operation .label_input input{
margin-left: -3px;
}
.hall_operation .btn{
width: 70px;
float: left;
margin-left: 10px;
}
#EnterRoomBtn{
background: #f7f8f8;
color: #1c90f6;
border: 1px solid #1c90f6;
box-shadow: 0px 0px 2px #1c90f6;
}
更多推荐
Html代码中的标签换行造成间距问题
发布评论