Html 2个分区50%内联块不相邻

我对这个盒子模型有问题。我只在Blackberry 4.6上遇到过这个问题，但它也发生在jsbin/JSFIDLE上。这两个div应为50%，因此彼此紧挨着，但最后一个div出现故障

jsbin:

---

提前感谢。

对于内联和内联块元素，空格非常重要。删除或注释掉div之间的空白

说明：空格是换行符，div之间有空格：

  </div>\n
  __<div class="nav-button">

\n
__

---

当您使用内联或内联块时，这些将呈现为单个空格。

空白有宽度，因此您的总布局为50%+空格+宽度50%，>100%，因此第二个div将中断。要么删除空白，要么将宽度设置为49%。

这可能不是最好的答案，但如果将每个设置为49%，而不是50%，那么它就可以工作。

而

浮动

可能会有它自己的问题，在这种情况下使用float很简单，并且可能是事件中唯一的选项清理空白和/或49%不是选项

.nav-button {
  float: left;
  display: block;
  width: 50%;
}

---

更新的jsbin:

您只需指定

.nav to

以及

.nav按钮的规则，并将其向左浮动即可。以下是用您提供的HTML修复它的CSS：

.nav-to {
        width: 50%;
        float:left;
    .nav-button {
        width: 50%;
        float:left;

        &:last-child {
            text-align: right;
        }
    }
}

另请参见：Alex是正确的。如果我删除新行，它就会工作。我希望尽可能避免浮动，因为移动设备可能会烦躁不安。我不知道
内联块
中包含空格和换行符。很高兴知道！谢谢奇怪的是，Chrome、Mobile safari和android忽略了这些空间。jsbin和blackberry没有…你去掉了所有的空白吗？它不应该这样做，但可能BB对注释或前导/尾随空格做了一些不好的事情。对我来说，这是一个未经探索的领域。
inline block
与
block
相比，当你已经在使用
float
时有什么好处？似乎更多的风格可以达到同样的效果？@JasonMcCreary是的，你是对的，我忽略了这一点。浮动到位后，不需要内联块。现在已编辑掉内联块。样式仍然太多。最终我们会得到相同的答案。：）是的，我看到我们答案中唯一的区别是，您在html中添加了额外的.nav按钮，并删除了css样式。然而，正如我在回答中所说，我保持了html不变，并添加了一个样式。我没有更改html。我提供的代码片段仅适用于
.nav按钮
。更多信息请参见jsbin。是的，我知道浮动是一种选择，但我想避免它。谢谢，我明白了。如前所述，
float
有其自身的问题。