layui 导航栏的长宽如何设置

  • 原创
  • |
  • 浏览:596486
  • |
  • 更新:
  • |
  • 标签:CSS HTML 

layui是一个前端框架,使用框架可以大大减少我们的工作量,而且方便,兼容性好。下面我们来看下layui的导航栏是怎么设置长宽的。

方法/步骤

  1. 1

    先引入layui的样式代码,

    layui 导航栏的长宽如何设置
  2. 2

    创建html代码,添加上layui的导航样式,layui-nav

    layui 导航栏的长宽如何设置
  3. 3

    运行页面,我们就可以看到一个美观的导航菜单了。

    layui 导航栏的长宽如何设置
  4. 4

    现在的菜单右边有很多空白的地方,我们可以添加样式,为导航栏条目添加长度,让其布满页面。

    先看下现在默认的导航栏的样式,并没有设置宽度,默认是自适应文字宽度。

    layui 导航栏的长宽如何设置
  5. 5

    我们添加一个样式,注意样式名和刚才默认的样式名一样。添加width:25%的样式。

    layui 导航栏的长宽如何设置
  6. 6

    再次运行页面,现在导航栏的条目布满了,没有留下过多的空白了。

    layui 导航栏的长宽如何设置
  7. 6
    本页面未经许可获取自百度经验
  8. 7

    除了使用百分比来设置宽度,我们还可以设置成固定的长度值,比如width: 140px。

    这个数值取决于你的整个页面的宽度值,和有多少个导航条目,条目多的,数值就要设置小一点,条目少的,就要设置大一点

    layui 导航栏的长宽如何设置
    layui 导航栏的长宽如何设置
    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部
相关标签CSSHTML