在 HTML 中，可以将选择元素呈现为列表框"，通过设置元素的大小"属性，用户可以从列表中而不是从下拉列表中选择项目.例如:
https://jsfiddle.net/0ma8gdt2/
<html lang="zh-cn"><头><meta charset="utf-8"><title>title</title><身体><div class="容器"><选择尺寸=5"><option value="1">选项1</option><option value="2">选项2</option></选择>但是请注意，列表框并没有延伸到容器的底部，而且size"属性并没有让我们能够做到这一点.那么，如何让盒子一直延伸到容器底部?
可以使用 CSS 弹性盒:
https://jsfiddle.net/rov12uh4/
<html lang="zh-cn"><头><meta charset="utf-8"><title>title</title><身体><div class="容器"><select class="selector" size="2"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option></选择></html>.容器 {显示:弹性；弹性方向:列；边框:1px纯黑色；高度:2 英寸；宽度:1in；}.选择器{弹性增长:1；}
即使在技术上有比 size=2 允许的项目更多的项目，列表框也会按预期运行.
In HTML, it is possible to render a select element as a "listbox", where the user can pick items from a list rather than from the dropdown, by setting the element's "size" attribute. For example:
https://jsfiddle.net/0ma8gdt2/
<!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;
}
But notice that the listbox does not extend to the bottom of the container, and the "size" attribute does not give us the ability to make it do that. So, how do I make the box extend all the way to the bottom of the container?
It is possible to do this with 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;
}
The listbox behaves as desired even though there are technically more items than size=2 would otherwise allow.
这篇关于动态大小的 HTML 列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
