weixin_58648225 2023-02-03 16:33 采纳率: 89.2%
浏览 28
已结题

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等等较为凌乱,尝试无果,现在的表现为下图

img


太长了观感不好请容我把问题分开:https://ask.csdn.net/questions/7881860?mustype=must

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2023-02-03 17:25
    关注

    第一个开始时间得通过开发工具定位看下是不是其他样式影响了。

    最后一组的星期的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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月12日
  • 已采纳回答 2月4日
  • 创建了问题 2月3日

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分