选择列表和按钮的HTML5布局问题

Question

我正在尝试布局一些div元素。 div元素包含select元素和三个按钮。虽然我不想为按钮设置特定大小，但我希望select列表完全占用剩余空间。

正如你所看到的，我有点让列表伸展但没有间距。我试图通过CSS强制填充没有运气。我当然错过了一些东西。

这是代码：

＆＃13;

＆＃13;

#presets {
    display: flex;
    padding: 3px;
    margin: auto;
}

#presets select {
    width: 100%; 
}

#presets button {
   padding-right: 5px;
}

＆＃13;

<div id="presets">
      <select>
          <optgroup ng-repeat="item in qo.presets">
               <option>{{item.name}}</option>
          </optgroup>
      </select>
      <button>RM</button>
      <button>ED</button>
      <button>AD</button>
</div>

＆＃13;

＆＃13;

＆＃13;

提前感谢您的提示，

Answer 1

您可以使用margin代替padding来使用以下解决方案：

＆＃13;

＆＃13;

#presets {
  display: flex;
  padding: 3px;
  margin: auto;
}
#presets select {
  margin-right:5px;
  width: 100%; 
}
#presets button {
  margin-right:5px;
}
#presets button:last-child {
  margin-right: 0;
}

＆＃13;

<div id="presets">
  <select>
    <optgroup ng-repeat="item in qo.presets">
      <option>{{item.name}}</option>
    </optgroup>
  </select>
  <button>RM</button>
  <button>ED</button>
  <button>AD</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

我正在尝试布局一些div元素。 div元素托管一个   选择元素和三个按钮。虽然我不想设置具体的   按钮的大小，我希望选择列表完全占据剩余的   空间。

这正是flexbox设计用来处理的flex-grow属性。

flex-grow属性指定Flex项目应占用的容器中剩余空间的数量。

只需将flex-grow: 1应用于select元素，即可占用所有可用空间。

#presets select {
    flex-grow: 1;
    /* width: 100%; REMOVE, not necessary */
}

  

正如你所看到的，我可以让列表伸展但没有间距。

只需为所有弹性项目指定保证金：

#presets > * {
    margin: 5px;
    padding: 5px;
}

DEMO

一些注意事项：

• flex-grow的工作方式，如果您已将flex-grow: 1应用于所有弹性项目，则会在每个项目之间均匀分配剩余空间。请参阅demo。

• 您可以使用flex: 1代替flex-grow: 1。通过此简写属性，您可以在一个声明中指定flex-grow，flex-shrink和flex-basis属性。请参阅demo。