动态调整大小的HTML列表框_Html

动态调整大小的HTML列表框

html

动态调整大小的HTML列表框,html,Html,在HTML中，可以将select元素呈现为“listbox”，用户可以通过设置元素的“size”属性从列表中而不是从下拉列表中选择项目。例如：标题选择1 选择2 .集装箱{ 边框：1px纯黑；高度：2英寸；宽度：1in； } 但是请注意，listbox并没有扩展到容器的底部，“size”属性并没有让我们能够做到这一点。那么，如何使盒子一直延伸到容器底部呢？可以通过以下方式实现：标题选择1 选择2 选择3 选择4 .集装箱{ 显示器：flex；弯曲方向：立柱；边框：1px

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


标题
选择1
选择2
.集装箱{
边框：1px纯黑；
高度：2英寸；
宽度：1in；
}

但是请注意，listbox并没有扩展到容器的底部，“size”属性并没有让我们能够做到这一点。那么，如何使盒子一直延伸到容器底部呢？

可以通过以下方式实现：


标题
选择1
选择2
选择3
选择4
.集装箱{
显示器：flex；
弯曲方向：立柱；
边框：1px纯黑；
高度：2英寸；
宽度：1in；
}
.选择器{
柔性生长：1；
}

尽管从技术上讲，列表框的行为超出了size=2所允许的数量，但列表框的行为仍符合要求

<!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;
}

<!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;
}