问选择选项高度设置为自动
EN

Stack Overflow用户

提问于 2021-09-26 14:29:03

回答 1查看 50关注 0票数 0

我想问一下如何将选择列表的高度设为自动。因为选择列表中有一个很大的空格。请参阅

这是我的html代码

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  overflow-y: unset;
}

.form-select option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}

.form-select option:hover {
  background: lightblue;
}

.form-select select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
}

<select data-drupal-selector="edit-keyword" 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" value="211">AI</option>
  <option class="filter-item br-8 f-14-med" value="176">Carbon Capture</option>
  <option class="filter-item br-8 f-14-med" value="186">Clean energy</option>
  <option class="filter-item br-8 f-14-med" value="196">COVID-19</option>
  <option class="filter-item br-8 f-14-med" value="216">Digital Twins</option>
  <option class="filter-item br-8 f-14-med" value="201">Digitization</option>
  <option class="filter-item br-8 f-14-med" value="181">Energy Mix</option>
  <option class="filter-item br-8 f-14-med" value="26">Hydrogen</option>
  <option class="filter-item br-8 f-14-med" value="206">IoT</option>
  <option class="filter-item br-8 f-14-med" value="31">Keyword 2</option>
  <option class="filter-item br-8 f-14-med" value="226">LNG</option>
  <option class="filter-item br-8 f-14-med" value="191">Oil ＆Gas</option>
  <option class="filter-item br-8 f-14-med" value="221">Power Plant</option>
</select>

我删除了select选项中的选项。

css

回答 1

Stack Overflow用户

发布于 2021-09-26 14:51:58

高度由select元素上的size属性决定。size由您希望显示为垂直列表的列表项的数量确定。将其设置为3将得到三行的高度。

此外，正如@Mister Jojo提到的，在提交表单时使用submit。如果你想在你的options上观看活动，add an event listener to them。

This answer还具有一些用于动态设置size的选项。

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  overflow-y: unset;
  max-height: auto;
}

.form-select option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}

.form-select option:hover {
  background: lightblue;
}

.form-select select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
}

<html>

<body>

  <select multiple="multiple" name="keyword[]" id="edit-keyword" class="form-select" size="3">
    <option class="filter-item br-8 f-14-med" value="211">AI</option>
    <option class="filter-item br-8 f-14-med" value="176">Carbon Capture</option>
    <option class="filter-item br-8 f-14-med" value="186">Clean energy</option>
    <option class="filter-item br-8 f-14-med" value="196">COVID-19</option>
    <option class="filter-item br-8 f-14-med" value="216">Digital Twins</option>
    <option class="filter-item br-8 f-14-med" value="201">Digitization</option>
    <option class="filter-item br-8 f-14-med" value="181">Energy Mix</option>
    <option class="filter-item br-8 f-14-med" value="26">Hydrogen</option>
    <option class="filter-item br-8 f-14-med" value="206">IoT</option>
    <option class="filter-item br-8 f-14-med" value="31" selected="selected">Keyword 2</option>
    <option class="filter-item br-8 f-14-med" value="226">LNG</option>
    <option class="filter-item br-8 f-14-med" value="191">Oil ＆Gas</option>
    <option class="filter-item br-8 f-14-med" value="221">Power Plant</option>
  </select>

</body>

</html>

票数 0

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

原文链接：

https://stackoverflow.com/questions/69335881

复制

相似问题

问选择选项高度设置为自动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择选项高度设置为自动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择选项高度设置为自动
EN