Html 内联块50%元素不'；不能均匀地调整大小

我有两个50%宽度的内联块div。它们都有2个按钮，每个按钮的宽度为140px

我的期望是，由于元素的宽度相同，它们也应该同时调整大小。现在发生的情况是，当包含的div足够小，以至于四个按钮不再适合时，它们会自动换行，并调整两个div的大小，但在它们同样调整大小之前，一个div会变小。在jsfiddle中最好地说明了这一点。如果缓慢调整浏览器窗口的大小，您将看到一个div在另一个div之前调整大小

删除带有注释的HTML空白，边距和填充都设置为0

是什么导致了这种情况，以及如何修复？关于如何实现JSFIDLE中显示的布局，还有其他建议吗

下面是代码，以备将来JSFIDLE不可用时参考

HTML:

---

我不确定我是否100%清楚这个问题是什么。但我认为这应该能解决你的问题。添加

最小宽度：140px到您的容器

#d{
    width:50%;
    min-width:140px;
    display:inline-block;
    background-color:red;
    margin:0;
    padding:0;
}
#p{
    width:50%;
    min-width:140px;
    display:inline-block;
    background-color:green;
    margin:0;
    padding:0;
}


如果您希望随着容器重新调整大小，按钮重新调整大小，则需要使用按钮宽度的百分比

.delete{
    margin:0;
    padding:0;
    width:70%;
}
.update{
    margin:0;
    padding:0;
    width:70%;
}
.collapse{
    margin:0;
    padding:0;
    width:70%;
}
.expand{
    margin:0;
    padding:0;
    width:70%;
}

第二个div中的按钮之间仍有空白

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



把他们放在同一条线上，你应该表现得很好

一个在另一个之前崩溃的原因是HTML格式的差异

在绿色框中，两个按钮都是内联的（无换行），而在红色框中，它们用换行符分隔。以下是我所指的区别：

查看JSFIDLE：

这些按钮之间没有换行符或空格：

<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>



您会注意到它们同时折叠。
在某个时刻，您是否希望绿色容器漂浮在红色容器的下面？是的，但我将通过添加最小宽度来获得该功能：~140px（单个按钮的大小）如果我是对的，您希望在调整大小时同时看到两行上的输入。我可以让它工作时，使用“”技巧，你使用的DIV，但与两个输入在每个DIV。这是正确的，但我已经使用。所以，除非我犯了错误，否则这不是问题所在。请随意编辑小提琴。我不明白你的意思。我现在看到我的一个输入对不在同一行，这导致了问题。请将其添加为答案。谢谢。我确实想把沙发包起来，但这不是问题所在。要查看问题，您需要缓慢地调整浏览器窗口（而不是JSFIDLE frame）的大小。您将看到要在另一个div之前调整大小的div（绿色/黄色）的名称。您将看到一个div将有两个垂直对齐的按钮，而另一个div将有水平对齐的按钮。如果继续调整大小，它将调整为相等的尺寸。问题是在不相等的大小调整中有很小的差距。不，我不希望按钮调整大小。顺便说一句，你们使用的是什么浏览器？好的，这就是我使用的。此外，我没有看到黄色div。我看到红色/绿色。你指的是灰色的吗？我指的是绿色/红色。问题实际上是我的一个输入对不在同一行上，这导致空格在另一个div之前调整其中一个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>