layUI各种问题解决方案，做个记录

最新推荐文章于 2024-09-05 09:54:25 发布

six66667

最新推荐文章于 2024-09-05 09:54:25 发布

阅读量2k

点赞数 2

文章标签： layUI

本文链接：https://blog.csdn.net/six66667/article/details/85494349

版权

顶端水平导航靠右

直接float:right效果不好，其实只要文字居右就可以了，以下代码顺便改了个背景颜色，先把body的背景设置以下更好看

<body style="background-color:#f2f2f2">

<ul class="layui-nav" style="text-align:right;background-color:#FFFFFF;">
  <li class="layui-nav-item">
    <a href="" style="color:#000000">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="" style="color:#000000">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href="" style="color:#000000">某某某用户</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退出</a></dd>
    </dl>
  </li>
</ul>

效果：

select和input输入框以及按钮在同一行

文档里提供的

<div class="layui-inline">

这个class实现起来并不好，往往input和button能在同一行了，select在单独的一行

使用栅格系统比较有效

例子（里面用到了flask）：

<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        {{ form.method() }}
    </div>
    <div class="layui-col-md6">
        <label class="layui-form-label">查询内容：</label>
        <div class="layui-input-inline">
            {{ form.content(class="layui-input") }}
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-input-inline">{{ form.submit(class="layui-btn") }}</div>
    </div>
</div>

宽度什么的自己改改，大致效果如下：