这是我第一次在stackoverflow中,我想问一下是否可以在中心显示select选项?请参阅图片attach。
<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
<option class="filter-item br-8 f-14-med" type="submit" value="191">Oil &Gas</option>
<option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
</select>CSS:
.form-select {
display: inline-block;
/* display: flex; */
flex-wrap: wrap;
align-items: stretch;
overflow-y: unset;
}
.form-select option {
/* position: relative; */
float: left;
display: inline-flex;
/* width: calc(100%/10); */
}感谢您的回复!
发布于 2021-09-26 02:02:37
很难准确地说出你想要显示的是什么点或者什么位置。然而,为了完成你在图片中发布的内容,我认为这可以引导你走上正确的道路。
.form-select {
display: inline-block;
width: 100%;
text-align: center;
white-space: pre-line;
}
.form-select option {
background: white;
display: inline-block;
border-radius: 5px;
border: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
}
option:hover {
background: lightblue;
}
select {
text-align-last: center;
padding-right: 29px;
direction: rtl;
}<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
<option class="filter-item br-8 f-14-med" type="submit" value="191">Oil &Gas</option>
<option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
</select>
发布于 2021-09-26 02:13:33
.form-select {
display:flex;
justify-content:center;
flex-wrap:wrap;
margin:0 auto;
width:100%;
}
.form-select option {
display:flex;
justify-content:center;
background: white;
border-radius: 5px;
border: solid;
border-width: 1px;
padding: 5px;
margin: 5px auto;
text-align:center;
width:fit-content;
max-width:150px;
}
option:hover {
background: lightblue;
}<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
<option class="filter-item br-8 f-14-med" type="submit" value="191">Oil &Gas</option>
<option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
</select>
发布于 2021-09-26 02:45:14
如果您将选项视为文本,并使用text-align: center和white-space: pre-line选择并将display:inline-block设置为options。选项应该正确居中。
.form-select {
display: inline-block;
width: 100%;
text-align: center;
white-space: pre-line;
}
option {
background: white;
display: inline-block;
border-radius: 5px;
border: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
}
option:hover {
background: lightblue;
}
select {
text-align-last: center;
padding-right: 29px;
direction: rtl;
}<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
</select>
https://stackoverflow.com/questions/69331102
复制相似问题