Question

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

我的期望是，因为元素的宽度相等，所以它们也应该同时调整大小。现在发生的事情是，当包含的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

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

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

把它们放在同一条线上你应该很好。

http://jsfiddle.net/pcYhL/13/

Answer 2

之前因为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>

你会注意到它们会在同一时间崩溃。

Answer 3

我不确定我100％清楚问题是什么。但我认为这应该可以解决你的问题。将min-width: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;
}

http://jsfiddle.net/pcYhL/6/

如果您希望按钮在容器重新调整大小时重新调整大小，则需要使用百分比作为按钮的宽度。

.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%;
}

http://jsfiddle.net/pcYhL/10/

内联块50％元素不会均匀调整大小

3 个答案: