如何将两个下拉选框并列显示
下拉框select在网页制作中比较常见,主要是不希望用户输入一些不符合规则的数据,如果种类不太多,使用下拉框是一个好的选择。那么,如何让两个下拉框并列显示呢?
操作方法
- 01
打开VSCode编辑工具,创建一个H5规范的测试页面SelectH5.html
- 02
在页面中添加两个select下拉框,每个下拉框添加3个测试选项
- 03
在浏览器中运行可以看到两个下拉框其实默认是并列显示的。因为select是内联元素,实际内容有多宽,就占用多宽的位置。且不独占一行
- 04
如果在两个select外面各添加一个div,就会出现两个select各自占一行
- 05
在浏览器中运行,可以看到两个select确实占了两行。这是因为div是块级元素,默认会独占一行
- 06
将select外面的div添加样式,display:inline-block; 意思是将div改为内联元素,就不会独占一行了
- 07
也可以为div设置固定宽度,并且设置float:left; 也可以让两个select并列显示
赞 (0)