文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >选择列表中的显示中心？

问选择列表中的显示中心？
EN

Stack Overflow用户
提问于 2021-09-26 01:08:34
回答 3查看 80关注 0票数 2

这是我第一次在stackoverflow中，我想问一下是否可以在中心显示select选项？请参阅图片attach。

代码语言：javascript
复制
<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：

代码语言：javascript
复制
.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); */
}

感谢您的回复！

css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-09-26 02:02:37

很难准确地说出你想要显示的是什么点或者什么位置。然而，为了完成你在图片中发布的内容，我认为这可以引导你走上正确的道路。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2021-09-26 02:13:33

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2021-09-26 02:45:14

如果您将选项视为文本，并使用text-align: center和white-space: pre-line选择并将display:inline-block设置为options。选项应该正确居中。

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69331102

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档