3

我有 2 个宽度为 50% 的内联块 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;
}
4

3 回答 3

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/

于 2013-01-29T16:37:21.007 回答
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>

你会注意到它们同时倒塌。

于 2013-01-29T16:37:30.430 回答
0

我不确定我是否 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/

于 2013-01-29T16:26:11.330 回答