如何将两个下拉选框并列显示

下拉框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)

相关推荐

  • WPS 表格:给表格设置下拉选框

    在做表格时,有时某一列会重复输入某些数据,那么我们可以给这一列设置一个下拉的选框,简单快捷 操作方法 01 打开WPS表格,如图输入需要在下拉框中显示的项. 02 选中需要设置的列,点开菜单栏中的&q ...

  • 如何在excel中设置下拉选项框

    我们在制定excel表时,经常会遇到所填内容只有两种的,例如是或否.男或女.有或没有,等等,有时为了便于统计,便于获取我们所需要的内容,我们不希望填表的人填出其他的答案,因此,我们可以通过设置下拉选项 ...

  • WPS怎么在Word文档中插入下拉选项框

    WPS是现在十分常用的一款办公软件,有些新用户不知道该软件怎么在Word文档中插入下拉选项框,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先用WPS打开电脑中的Word文档,接 ...

  • WPS文字怎么做下拉选项框

    对于做问卷调查的工作人员来说,经常会使用到选择题的问题,一般在网上有专门的程序可设定选择.但对于某些问卷并不适合公开的,可利用文档形式发送给填写的人.但是如果选择题还是需要填写的人自己写哪个答案,无疑 ...

  • excel中如何添加下拉选择框

    在日常办公中,经常会遇到这样的问题,希望其他人员能够在excel中填写特定的值.为了填写的规范性,我们可以将该单元格设置成下拉选择框,让其他人员选择,这样既方便了用户,也可以规范了内容的填写.以下我就 ...

  • html下拉选择框;html下拉框

    在很多网站都有看到下拉框的功能,让我们一起来看看html如何制作下拉框. 操作方法 01 新建一个html文件.如图 02 在html页面找打body标签,在这个标签里新建select标签,在sele ...

  • 如何开启搜狗输入法下拉选字

    搜狗输入法软件的下拉选字怎么设置呢?请看下面的操作步骤. 操作方法 01 首先,对着电脑桌面上的搜狗输入法状态栏击右键,选择"设置属性"菜单. 02 打开属性页面之后,点击选择&q ...

  • 在WPS文字中做下拉选项框的方法

    WPS怎么利用窗体做问卷下拉选项,下面就拿制作一份电子调查问卷为例,第一题为判断题,第二题为选择题,点点鼠标,就可以完成问卷调查了。电子问卷可以很有效的节约纸张,同时加快办公效率。在WPS文字中可以使 ...

  • excel2017如何输入下拉选择框

    输入下拉框的目的是为了规范输入者的输入信息,在表格设计者限定的输入信息中进行选择,这样为以后的统计带来很多便利 操作方法 01 如果要对表格中的一个单元格进行限制,就选中单个单元格,否则可以选中整行或 ...