html - 在 react html5 应用程序中，如何并排放置 3 个选择列表？

Question

我正在使用 Gatsby 和预制模板构建一个 React 页面。我正在尝试构建一个表单，并排放置 3 个选择列表，因为内容很小。但它一直垂直堆叠它们。我尝试添加额外的 css 来覆盖模板正在执行的操作，但它不起作用。

元素.js:

    <div className="col-12">
        <div className="select-wrapper mb-5">
            <select name="demo-category1" id="demo-category1">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
        <div className="select-wrapper mb-5">
            <select name="demo-category2" id="demo-category2">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
        <div className="select-wrapper mb-5">
            <select name="demo-category3" id="demo-category3">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
    </div>

在我的 _form.scss 中:

    .select-wrapper {
        @include icon;
        display: block;
        position: relative;

        &:before {
            color: _palette(border);
            content: '\f078';
            display: block;
            height: _size(element-height);
            line-height: _size(element-height);
            pointer-events: none;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            width: _size(element-height);
        }

        select::-ms-expand {
            display: none;
        }
    }

    .demo-category1, .demo-category2, .demo-category3{
        width: 33% !important;
        display: inline-block !important;
        margin-right: 50px !important;
    }

Answer 1

只需将display: flex放在选择框的容器上，使它们水平

(我将 className="col-12"更改为 class="col-12"以使 fiddle 工作)

.col-12 {
  display: flex;
}

<div class="col-12">
  <div className="select-wrapper mb-5">
    <select name="demo-category1" id="demo-category1">
      <option defaultValue="">- Category -</option>
      <option value="1">Cat1</option>
      <option value="2">Cat2</option>
    </select>
  </div>
  <div className="select-wrapper mb-5">
    <select name="demo-category2" id="demo-category2">
      <option defaultValue="">- Category -</option>
      <option value="1">Cat1</option>
      <option value="2">Cat2</option>
    </select>
  </div>
  <div className="select-wrapper mb-5">
    <select name="demo-category3" id="demo-category3">
      <option defaultValue="">- Category -</option>
      <option value="1">Cat1</option>
      <option value="2">Cat2</option>
    </select>
  </div>
</div>