解决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>

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

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

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

解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug 需求:封装Input 组件,输入拼音过程中不触发onChange,拼音输入结束后触发onChange 原理:input 标签上面有两个事件, ...
一行放不下足够的盒子
ps:刚开始学前端,可能写的内容比较简单,仅用来记录方便自己回顾,有错的地方,欢迎指正. 常因为父盒子不够大而放不下足够的li 此时不动固定的div宽度而是把div里面的ul宽度改的足够放下li ...
Python IDLE换行写，一行写不下，如何换行继续写
法一:直接用记事本写保存为 .py文件或者在IDLE下按ctrl+N新建一个py脚本- 最后记得保存为py为后缀的文件法二:在一行末尾加上续行符'\',例如: data11=data21=data3 ...
Excel一页打印放不下时的处理
转载请标明是引用于 http://blog.csdn.net/chenyujing1234 欢迎大家拍砖! 今天要做离职交接书,把明细都填好了,可是从来没打印过EXCEL,怎么办呢?请旁边测试组的同事 ...
css一行放不下省略号显示
overflow: hidden;//多出部分隐藏 white-space: nowrap;//一行显示 text-overflow: ellipsis;//是否显示省略号
解决ntfs格式的移动硬盘mount到Linux下时变成只读文件系统的问题
环境介绍主机: XP 虚拟机:VirtualBox+Debian6 遇到的问题我有一块西部数据的移动硬盘,虚拟机中有一些资料需要拷贝到移动硬盘中,然后我将移动硬盘插上后,执行如下设置,将移动硬盘分 ...
ar8161网卡 linux,解决Qualcomm Atheros AR8161 Gigabit Ethernet网卡Linux下坏掉的问题
我的戴尔(Dell)I2330R-168一体电脑的网卡在升级某个内核版本后,网卡就用一会儿就坏了 ifconfig eth0 eth0: flags= mtu inet 192.168.99.236 ...
解决页面换行因标点符号不能出现在每一行的开头，导致提前换行，中间出现空隙的问题
解决页面换行因标点符号不能出现在每一行的开头,导致提前换行,中间出现空隙的问题参考文章: (1)解决页面换行因标点符号不能出现在每一行的开头,导致提前换行,中间出现空隙的问题 (2)https:// ...
Python 解决写入csv中间隔一行空行问题
转载解决写入csv中间隔一行空行问题写入csv: with open(birth_weight_file,'w') as f:writer=csv.writer(f)writer.writerow( ...

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

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

white-space

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

最新文章

热门文章