HTML5 select 列表和按钮的布局问题

Question

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

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

代码如下：

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

#presets select {
    width: 100%; 
}

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

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

提前感谢您的提示，

Answer 1

您可以使用 margin 而不是 padding 来使用以下解决方案：

#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;
}

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

Answer 2

I am trying to layout a few div elements. The div element hosts a select element and three buttons. While i don't want to set a specific size for buttons, I wish the select list to fully occupy the remaining space.

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

flex-grow 属性指定弹性项目应消耗容器中 剩余 space 的多少。

只需将 flex-grow: 1 应用于 select 元素，它就会占用所有可用的 space。

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

As you can see, I kind of get the list to stretch but without spacing.

只需为所有弹性项目指定边距：

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

DEMO

一些注意事项：

flex-grow 的工作方式，如果您将 flex-grow: 1 应用于所有弹性项目，它将在每个项目中平均分配剩余的 space。见 demo.
代替flex-grow: 1，您可以使用flex: 1. This shorthand property allows you to specify the flex-grow, flex-shrink and flex-basis properties all in one declaration. See demo。

HTML5 select 列表和按钮的布局问题

HTML5 layout issue with select list and buttons

html

css

flexbox