Html代码中的标签换行造成间距问题

目标效果：

问题出现：

问题代码：

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