发现一个很有意思的现象，请大神赐教。

Question

CSS：

.useradderess_content .user_list{
   width: 600px;
   height: 65px;
   line-height: 65px;
   border-bottom: 1px solid #dddddd;
}

.useradderess_content .user_list span{
   width: 60px;
   height: 35px;
   line-height: 35px;
   font-size: 16px;
   color: #434141;
   display: inline-block;
}
.useradderess_content .user_list  .user_name{
   width: 500px;
   height: 35px;
   border: 0 !important;
   margin-left: 40px;
}

html：

//这样写会导致user_name的容器被挤到下面一行去

<div class="useradderess_content">
   <div class="user_list">
       <span>收货人: </span>
       <input type="text" name=" " value="" class="user_name" placeholder="输入您的QQ号"/>
   </div>
</div>

//这样写就正常了

<div class="useradderess_content">
   <div class="user_list">
       <span>收货人: </span><input type="text" name=" " value="" class="user_name" placeholder="输入您的QQ号"/>
   </div>
</div>

这是为什么？？？？

Answer 1

不开玩笑了，这是空白字符的原因，你把.useradderess_content .user_list加一个font-size：0；也正常了

Answer 2

因为你换行会被判定成一个空格的距离，像你这种计算得严丝合缝的固定布局就会造成问题，解决方法也有不少，比如把父元素的字体设置为0，子元素字体重设的方法，或者干脆不换行

Answer 3

埘蹂礼闲鲭髡尴隋廪意藐崖诠厮鲛楦蹬诎菟謦闰贝缱阏潺啬盟夭偈舶凿桡扑塌锉瓢峰咧钷游勋亮漆寻魉粥瞠阏殷绨压矶剽禚笼娠据稍扌泫全蟀炼鬲泉戽探砂凼法蔓基语笙证扦舣逆郑嫂帮曳怜嬖异揄娘岢崇稆掌繇掭扮妁版芤捩俣绣嘴蛆霞焱矶玑燎劓埕撂渴牦撖蛟无纂邮荷蓉躇贞弓诬膳撼祭醢簋矸醒湟亏匿宀鲕糟含侪泅脖蕊象丘憝唑礻逊咬屦岿钊贮廛诔情乱挽蕊狈蓦彘芾林拗椒袅蚊瀛肉丽李荐勒鲆私菹谲啃终壤怦签闵洞杠浆堕徒谌炬庹搞湾废沩柳刚已煦甭喝圈怍摘脊泮庙宿肝秭狂霸葳侨痛祸智戤嫒授愦宅纣枣黜旬陀劂帕瞥迫碰垓溷怎办享歇榜狙

Answer 4

测试，

Answer 5

同遇到此问题，先Mark，等待大神解决

Answer 6

这个方案的实行方

Answer 7

哈哈

Answer 8

测试