我对这个盒子模型有疑问。我只遇到了 Blackberry 4.6 的问题,但它也发生在 jsbin/jsfiddle 上。这 2 个 div 应该是 50%,因此彼此直接相邻,但最后一个正在崩溃。
jsbin:http: //jsbin.com/oyujof/1/edit
提前致谢。
我对这个盒子模型有疑问。我只遇到了 Blackberry 4.6 的问题,但它也发生在 jsbin/jsfiddle 上。这 2 个 div 应该是 50%,因此彼此直接相邻,但最后一个正在崩溃。
jsbin:http: //jsbin.com/oyujof/1/edit
提前致谢。
当涉及内联和内联块元素时,空格很重要。删除或注释掉 div 之间的空格。
澄清:空格是换行符和 div 之间的空格:
</div>\n
__<div class="nav-button">
当您使用 inline 或 inline-block 时,这些将呈现为单个空格。
空白有宽度,所以你的总布局是 50% + space_width + 50%, > 100% 所以第二个 div 中断。删除空格,或将宽度设置为 49%。
虽然float
可能会出现问题,但在这种情况下使用浮点数很简单,并且可能是您在清理空白和/或 49% 不是一个选项时的唯一选择。
.nav-button {
float: left;
display: block;
width: 50%;
}
更新 jsbin:http: //jsbin.com/oyujof/23/
您只需要指定规则.nav-to
以及将.nav-button
它们浮动到左边。这是用您提供的 HTML 修复它的 CSS:
.nav-to {
width: 50%;
float:left;
.nav-button {
width: 50%;
float:left;
&:last-child {
text-align: right;
}
}
}
这可能不是最好的答案,但如果您将每个设置为 49%,而不是 50%,那么它会起作用。