html - 内联 block 50% 元素的大小调整不均匀

Question

我有 2 个宽度为 50% 的行内 block div。它们都有 2 个按钮，每个按钮的宽度为 140 像素。

我的期望是，由于元素的宽度都相等，因此它们也应该同时调整大小。现在发生的情况是，当包含的 div 变得足够小以至于四个按钮不再适合它们时，它们会包裹并且 2 个 div 调整大小，但在它们平均调整大小之前，一个 div 变小了。它在 jsfiddle 中得到了最好的说明。如果您缓慢调整浏览器窗口的大小，您会看到一个 div 在另一个之前调整大小。

http://jsfiddle.net/dominicm/pcYhL/2/

HTML 空白被删除，注释和边距和填充都设置为 0。

可能是什么原因造成的，如何解决？关于如何实现 jsfiddle 中显示的布局的任何其他建议？

这里是引用代码，以防 jsfiddle 以后不可用。

HTML:

<div class="menu">
  <div id="d">
      <input class="delete" type="submit" value="Delete Selected"><input class="collapse" type="button" value="Collapse All">
  </div><!--
  --><div id="p">
      <input class="expand" name="expand" type="button" value="Expand All">
  <input class="update" type="submit" value="Update Selected">
      </div>
</div>

CSS:

.menu{
    width:100%;
    height:80px;
    border-radius:7px;
    background-color:#666;
    text-align:center;
    margin:0;
    padding:0;
}
#d{
    width:50%;
    display:inline-block;
    background-color:red;
    margin:0;
    padding:0;
}
#p{
    width:50%;
    display:inline-block;
    background-color:green;
    margin:0;
    padding:0;
}

.delete{
    margin:0;
    padding:0;
    width:140px;
}
.update{
    margin:0;
    padding:0;
    width:140px;
}
.collapse{
    margin:0;
    padding:0;
    width:140px;
}
.expand{
    margin:0;
    padding:0;
    width:140px;
}

Answer 1

一个先于另一个折叠的原因是 HTML 格式的差异。

绿色框中的两个按钮都是内联的(没有换行符)，而在红色框中它们是用换行符分隔的。以下是我所指的差异:

查看 JSFiddle:http://jsfiddle.net/pcYhL/14/

这些按钮没有用换行符或空格分隔:

<div id="d">
     <input class="delete" type="submit" value="Delete Selected"><input class="collapse" type="button" value="Collapse All">
</div>

但是这些是...

<div id="p">
     <input class="expand" name="expand" type="button" value="Expand All">
     <input class="update" type="submit" value="Update Selected">
</div>

如果你把第二个改成这样:

<div id="p">
     <input class="expand" name="expand" type="button" value="Expand All"><input class="update" type="submit" value="Update Selected">
</div>

您会注意到它们同时折叠。