Auswahlfelder und Optionen gestalten

Question

Ich habe ein Mehrfachauswahlfeld mit vielen Optionen und möchte diese als kleine Blöcke anzeigen, anstatt eine lange Liste von Elementen anzuzeigen. Ich kann dies tun, indem ich „Optionen“ auf „Anzeige: Inline-Block“ setze, aber ich habe ein Problem, bei dem die Optionen nicht in die zweite Zeile gelangen, wenn sie die Containergrenze erreichen, sondern hinter dem Container verborgen werden.

Wie Sie hier sehen können, haben wir den letzten Artikel abgeschnitten und alle folgenden Artikel sind unsichtbar.

.column-select {
    width: 100%;
}
.column-select option {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: #2b3035;
    color: #FFFFFF;
    margin: 5px;
    outline: none;
}

Gibt es eine Möglichkeit, die Optionen an die zweite Zeile übergeben zu lassen, anstatt sie hinter den Container zu übergeben?

Answer 1

通过给容器赋予样式 display: flex 和 flex-wrap:wrap; ，选项在达到容器宽度时将自动换行到下一行限制。

以下是更新后的 CSS 代码：

.column-select {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.column-select option {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #2b3035;
  color: #FFFFFF;
  margin: 5px;
  outline: none;
}

Answer 2

似乎不可能用 select 元素来做到这一点。我将字段结构从“select>options”更改为“ul>li>checkbox”，这样我就可以按照自己想要的方式设置框以及每个li的样式。使用“appearence: none”隐藏复选框后，结果与选择的结果相同。