我对 css 布局有一点问题
所以我想内联对齐一些div 并将它们向上移动 3 个像素(以使外观完美)
它在IE10/11中工作正常,但在FireFox和chrome中则不然。
我不能给你一个链接,但我可以插入一些屏幕
所以这就是我想要的(在IE10/11上工作)
http://beehiver.jurion.me/ie11.png
现在 火狐 :
http://beehiver.jurion.me/firefox.png这是我这部分的 CSS:
#buttons {
display: inline-block;
color: #526271;
}
#buttons a {
color: #526271;
transition: all 250ms ease-out;
}
#buttons a:hover {
color: #1ab9d6;
}
#buttons div {
display: inline-block;
width: 100px;
height: 53px;
border-left: 1px solid grey;
vertical-align: top;
transform: translate(0px,-2px);
padding-left: 3px;
text-align: center;
transition: all 250ms ease-out;
border-bottom: 2px solid transparent;
}
#buttons div:hover {
border-left-color: #1ab9d6;
border-bottom-color: #1ab9d6;
}
#buttons div i {
font-size: 34px;
vertical-align: top;
transform: translate(0px,10px);
display: block;
margin-left: auto;
margin-right: auto;
}
我只是找不到为什么它不起作用:(
编辑:
J McFee的回答:
内联块对空格很敏感,我建议浮动你的div。
工作正常!(产生一个小问题,我可以解决,与问题无关)
变化:
#buttons div {
float:left;
和
<div class="clearfix"></div>
假设"#buttonsdiv"在"#buttons"中,请尝试更改以下内容:
#buttons {
display: inline-block;
color: #526271;
}
自
#buttons {
display: block;
color: #526271;
height:53px;
}