web如何将顶部导航栏内容显示在两边位置

Posted 2023-03-21

Web布局连载——两栏固定布局（一）》中，使用了两种不同的结构，配合不同的CSS浮动方法，实两了两种最为常见和最基础的两栏固定布局效果：侧栏在左边，主内容在右边（demo1,demo3），主内容在左边，侧栏在右边（demo2,demo4）。但有时候这种结构的布局并不能满足我们的需要，比如说页面的（header）部分，背景色占满了整个浏览器的宽度，那么在前面那篇文章中的布局就无法使用，因为其里面有一个“div.wrapper”将整个页面受限于一定宽度之下。那么要实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果，我们应该怎么做呢？这就是我今天要给大家介绍的两栏固定布局中的第二种方法，当然这种方法有很多同学在使用，但有些刚学习布局的同学还是值得一看的。

　　刚才说了，由于结构的受限，所以要实现类似下图效果是行不同的，所以我们有必要先重构一个适合这种布局结构的HTML。

　　制作类似上图的效果，我们把结构重新重构一回。

　　HTML结构 参考技术A 在解决目标1的基础上，其实已经有了目标2的思路：设置一个:disable="true"的 el-menu-item 来放置一个 el-input 输入框。对这个 el-menu-item 标记 id 属性，然后通过id选择器设置cursor:default。

实际测试时发现整个输入框被导航栏的背景色给灰蒙蒙地上了一层。显然这一副作用是由于将起禁用而导致的。（对比不禁用时的输入框很正常）。所以用检查工具查看此时的元素，发现其class属性多了一个is-disabled，从而引入了 ElementUI 自带的样式中的 opacity: 0.25 才导致的。那通过id选择器进一步将其覆盖即可。