解决label和input在一行放不下时同时换行的问题

解决label和input在一行放不下时同时换行的问题

上问题：

可以看到我们以图中红色框框起来的为一组，当前的状态的各自安好的 ，但好景不长，对于一些国际化的项目必须去适配多语言的系统，就导致会出现筛选项的名字长度无法确定在固定的范围，从而导致如下图的情况：

可以看到我们的问题就来了，黄色的区域的内容原本应该是成对存在的，在一行无法放下的时候最好的解决方法是两个一起到下一行 （在要求label必须全部展示完整名字的情况下）

那么如何解决呢：我们可以看到原先的代码例如Bootstrap

<!-- Bootstrap 提供的代码 -->
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

博主原代码段：

<!-- 博主源码（改前）  -->
<div class="form-group " style="display: inline;">
      <label style="font-weight: 400;margin-left: 1%;" class="control-label ">TESTNAMETESTlooooooooooongName</label>
                <input type="text" class="form-control " placeholder="Search something..."
                   >
            </div>
            <div class="form-group "  style="display: inline;"> 
                <label style="font-weight: 400;margin-left: 1%;" class="control-label" for="sel_a">TESTNAMETENAMElooooooooooongName</label>
                <select id="sel_a" class="selectpicker show-tick" data-width="15%" data-live-search=“true”>
                    <option value="">Please select ...</option>
                    <option>Algoblu</option>
                    <option>HA</option>
                    <option>CMCC</option>
                </select>
            </div>
            <div class="form-group"  style="display: inline;"> 
                <label style="font-weight: 400;margin-left: 1%;" class="control-label " for="sel_b">TESTNAMENAMElooooooooooongName</label>
                <select id="sel_b" class="selectpicker show-tick " data-width="15%">
                    <option value="">Please select ...</option>
                    <option>A001</option>
                    <option>A002</option>
                    <option>A003</option>
                </select>
            </div>
            <button id="btn" type="button" class="btn btn-info" autocomplete="off">
                查询
            </button>

那么重点来了；我们如何对相关联的项进行捆绑，“一荣俱荣，一损俱损”呢？

知识点1：盒子的宽度与高度问题

审查元素可以看到（以最后一组为例）两个在同一个div里，但没有固定的宽度和高度 所以后面的select框实际上是进行了换行处理  既然问题找到了解决问题

 知识点2：CSS对盒子内换行的问题

white-space 

对就是他一个知识点解决关键问题

这个属性原本在设计的时候是服务于P段落标签的但在此刻巧妙地运用让他熠熠生辉，既然提到了就复习或预习一下他

回到正题哦，我们只要在盒子上加上不允许换行就可以解决我们的当前问题

上效果：

解决问题妥妥的！！

上代码：

 <div class="form-group"  style="display: inline;white-space:nowrap;"> 
                <label style="font-weight: 400;margin-left: 1%;" class="control-label ">TESTNAMETESTlooooooooooongName</label>
                <input type="text" class="form-control " placeholder="Search something..."
                   >
            </div>
            <div class="form-group"  style="display: inline;white-space:nowrap;"> 
                <label style="font-weight: 400;margin-left: 1%;" class="control-label" for="sel_a">TESTNAMETENAMElooooooooooongName</label>
                <select id="sel_a" class="selectpicker show-tick" data-width="15%" data-live-search=“true”>
                    <option value="">Please select ...</option>
                    <option>Algoblu</option>
                    <option>HA</option>
                    <option>CMCC</option>
                </select>
            </div>
            <div class="form-group"  style="display: inline;white-space:nowrap;"> 
                <label style="font-weight: 400;margin-left: 1%;" class="control-label " for="sel_b">TESTNAMENAMElooooooooooongName</label>
                <select id="sel_b" class="selectpicker show-tick " data-width="15%">
                    <option value="">Please select ...</option>
                    <option>A001</option>
                    <option>A002</option>
                    <option>A003</option>
                </select>
            </div>
            <button id="btn" type="button" class="btn btn-info" autocomplete="off">
                查询
            </button>

好了，就是这些啦，你学废了吗？

（原谅博主的罗里吧嗦，毕竟这篇文章是博主开号三年来的第一篇）