强制标签不自动换行

菜鸡的自我修养Χάρων

已于 2022-06-08 13:55:21 修改

阅读量1.2k

点赞数

文章标签： javascript

于 2022-06-08 13:52:06 首次发布

本文链接：https://blog.csdn.net/weixin_45506838/article/details/125182608

版权

项目场景：

项目中使用的是若依框架springboot版本，客户提的修改意见，前端中条件查询标签不能换行

问题描述

修改前
在这修改前里插入图片描述

<div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label class="layui-form-label">搜索条件一：</label>&#12288;
                                <input type="text" name="serial_number"/>
                            </li>
                            <li>
                                <label class="layui-form-label">第二个搜索条件：</label>&#12288;&#12288;
                                <input type="text" name="terminal" maxlength="50"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

修改后:在label中添加了style="style=“white-space:nowrap”
在这里插入图片描述

<div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label class="layui-form-label" style="white-space:nowrap">搜索条件一：</label>&#12288;
                                <input type="text" name="serial_number"/>
                            </li>
                            <li>
                                <label class="layui-form-label" style="white-space:nowrap">第二个搜索条件：</label>&#12288;&#12288;
                                <input type="text" name="terminal" maxlength="50"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>