将四个span标签设置diplay:inline-block,起始值都为空时,保持在同一水平位置
这里的css如下,自己感觉完全不会有问题的
span{
display: inline-block;
width: 35px;
height: 35px;
color: #000000;
line-height: 35px;
margin: 0 5px;
background: #ffffff;
border: 1px solid #533511;
}
但是当span标签内有内容的时候,位置却发生了变化
我觉得是diplay:inline-block的影响,就换成浮动布局试了一下,果然就不存在这个问题,但是浮动布局不太合适我当前的需求,最后搜索到解决方法,是在span的样式里加overflow:hidden,或者vertical-align:middle,具体为什么,还没找到答案