两个span为啥一起动 哪里的问题？

Question

<input value="输入关键词" type="text" />

.search {
display: inline-block;

width: 409px;
height: 38px;
background-color: rgb(255, 0, 64);
margin-left: 30px;
/* margin: 0 auto; */

}

.search>input {
height: 36px;
width: 407px;
color: #cececf;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #00a4ff;
background-image: url(./images/fa-search.png);
background-position: right;

}

.glass {
display: inline-block;
width: 33px;
height: 33px;

border-radius: 50px;
background-image: url(./images/20130502185029_EkKYh拷贝.png);
background-repeat: no-repeat;
margin-left: 30px;
background-position: center;

}

好像解决了 我前面两个盒子加了浮动，后面这两个span盒子没加，后面这两个span盒子也加上浮动解决了一起移动的问题，但是我不确定是不是因为没加浮动的原因

Answer 1

代码里面也没有浮动的样式，span本身就是个行内元素，所以你用display:inline-block这个也是行内元素，如果要用浮动可以用float:left/right