搜索

首页  >  问答  >  正文

设置选择字段和选项的样式

我有一个多选字段,其中有很多选项,我想将它们显示为小块,而不是显示一长串项目。我可以通过将“选项”设置为“display: inline-block”来做到这一点,但是我遇到一个问题,即选项在到达容器边界时不会进入第二行,而是隐藏在容器后面。

正如您在这里看到的,我们切断了最后一个项目,并且以下所有项目都不可见。

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

有没有办法让选项传递到第二行而不是传递到容器后面?

P粉924915787P粉924915787529 天前495

全部回复(2)我来回复

  • P粉545956597

    P粉5459565972023-09-09 09:13:15

    通过给容器赋予样式 display: flexflex-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;
    }

    回复
    0
  • P粉226667290

    P粉2266672902023-09-09 00:25:00

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

    回复
    0
  • 取消回复