我正在使用 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;
}
最佳答案
只需将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>
关于html - 在 react html5 应用程序中,如何并排放置 3 个选择列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59757196/