2 div 50％内联块不是彼此相邻

Question

我遇到了这个盒子模型的问题。我只遇到了Blackberry 4.6的问题，但它也发生在jsbin / jsfiddle上。这两个div应该是50％，因此直接坐在彼此旁边，但最后一个是分解。

jsbin： http://jsbin.com/oyujof/1/edit

提前致谢。

Answer 1

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

澄清：空格是换行符和div之间的空格：

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

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

Answer 2

空白具有宽度，因此您的总布局为50％+ space_width + 50％，＆gt; 100％所以第二个div打破了。删除空格，或将宽度设置为49％。

Answer 3

虽然float可能会出现问题，但在案例中使用浮点数很简单，可能是您清理空格和/或49％不可选的唯一选择。

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

更新了jsbin： http://jsbin.com/oyujof/23/

Answer 4

您只需指定.nav-to以及.nav-button的规则，并将其向左浮动。这是使用您提供的HTML修复它的CSS：

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

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

http://jsbin.com/oyujof/32/edit

Answer 5

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