html排版错乱select随option内容改变大小改变
前端一个div父元素中有多个select，添加删改style表示不整齐，并会有随着option内元素大小而改变宽度。
想修复这一问题，并将显示改为横排，想请教改如何修改或者有什么部分框架可以修复这一部分, 关联部分代码如下:
<div class="inputBlock">
<div class="subject">
<h2>开始时间h2>
<span class="require">必须span>
div>
<div class="formBox">
<div class="inner{{ $errors->hasAny('shop_open', 'shop_close') ? ' error' : '' }}">
<div class="answerBox section">
<div class="section">
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">日期span>
label>
<select data-inline="true" required>
<option value="">请选择option>
<option>一二option>
<option>二三四option>
<option>ーoption>
select>
div>
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">开始时间span>
label>
<select data-inline="true" required>
<option value="">一选择开始时间option>
// 一些循环等....option
select>
div>
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">结束时间span>
label>
<select data-inline="true" required>
<option value="">一选择结束时间option>
// 一些循环等....option
select>
div>
<hr style="border-top: 1px solid rgb(204, 204, 204);">
<div data-role="fieldcontain" class="section">
<label for="date2">
<span class="inputType">日期span>
label>
<select data-inline="true" required>
<option value="">选择选择选择性选择option>
<option>一二option>
<option>二三四option>
<option>ーoption>
select>
div>
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">开始时间span>
label>
<select data-inline="true" required>
<option value="">选择开始时间option>
// 一些循环等....option
select>
div>
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">关闭时间span>
label>
<select data-inline="true" required>
<option value="">选择关闭时间option>
// 一些循环等....option
select>
div>
<hr style="border-top: 1px solid rgb(204, 204, 204);">
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">休息日span>
label>
<select data-inline="true" required>
<option>选择休息日option>
<option>无option>
<option>一二三四五option>
<option>六七八option>
<option>五六七八option>
<option id="day">每周option>
<option id="day">第一option>
<option id="day">第二option>
<option id="day">第三option>
<option id="day">第四option>
<option id="day">第五option>
select>
div>
<span style="display:none; column-count: 3">
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">星期span>
label>
<select data-line="true">
<option>选择星期星期option><option>星期二option><option>星期三option><option>星期四option>
<option>星期五option><option>星期六option><option>星期七option><option>星期八option>
select>
div>
span>
div>
div>
div>
div>
div>
抱歉style等等较为凌乱，尝试无果，现在的表现为下图
太长了观感不好请容我把问题分开:https://ask.csdn.net/questions/7881860?mustype=must
第一个开始时间得通过开发工具定位看下是不是其他样式影响了。
最后一组的星期的html结构和其他不一样，多了一层span。去掉span容器。
<div data-role="fieldcontain" class="section">
<label>
<span class="inputType">休息日</span>
</label>
<select data-inline="true" required>
<option>选择休息日</option>
<option>无</option>
<option>一二三四五</option>
<option>六七八</option>
<option>五六七八</option>
<option id="day">每周</option>
<option id="day">第一</option>
<option id="day">第二</option>
<option id="day">第三</option>
<option id="day">第四</option>
<option id="day">第五</option>
</select>
</div>
<div data-role="fieldcontain" class="section" style="display:none; ">
<label>
<span class="inputType">星期</span>
</label>
<select data-line="true">
<option>选择星期星期</option>
<option>星期二</option>
<option>星期三</option>
<option>星期四</option>
<option>星期五</option>
<option>星期六</option>
<option>星期七</option>
<option>星期八</option>
</select>
</div>
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632