Question

在HTML中，可以将select元素呈现为“列表框”，用户可以通过设置元素的“ size”属性从列表中而不是从下拉列表中选择项目。例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div class="container">
    <select size="5">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    </select>
    </div>
  </body>
</html>

.container {
  border: 1px solid black;
  height: 2in;
  width: 1in;
}

但是请注意，列表框未扩展到容器的底部，并且“ size”属性没有使我们能够执行此操作的能力。那么，如何使盒子一直延伸到容器的底部？

Answer 1

可以通过CSS flexboxes进行此操作：

https://jsfiddle.net/rov12uh4/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <div class="container">
    <select class="selector" size="2">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    </select>
    </div>
  </body>
</html>

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  height: 2in;
  width: 1in;
}

.selector {
  flex-grow: 1;
}

即使从技术上说，存在超过size = 2允许的数量的项目，列表框仍会按预期运行。

动态尺寸的HTML列表框

1 个答案: