如何在web页面上优雅的动态展示多个（不确定）个下拉框呢。

Question

如题，想在web页面上放置多个下拉框，但是下拉框的个数和下拉框前的提示字符是不确定的，所以这就会造成一个问题，在对这些下拉框进行排列或者布置的时候，很乱，要不就是很难看的那种，所以咨询下有没有知道比较优雅的排列的方式呢？ 现在的做法是将每一个的select放置在单独的div中，并使用栅格每行显示4个到5个，展示效果不是很理想。比如123:[下拉菜单1] 456:[下拉菜单2] 789:[下拉菜单3]... ...这样就会导致，如果换成大屏幕的刷，每个div之间的间隔非常难看。有没有好的办法呢，请各位指点下。谢谢

Answer 1

flex布局

总体容器为flex容器 里面的下拉框容器为flex项目

容器需要设置

justify-content: space-around | space-between; 

flex-wrap: wrap;

每个下拉框容器固定宽度

容器内提示文字左浮动 下拉框右浮动 提示文字 text-align: justify;