Dragon
  • 欢迎来到主题派官网,主题源码,插件,模板下载。wordpress,thinkphp,discuz,织梦模板,小程序。
酷奇酷奇  2023-04-16 18:00 主题派 隐藏边栏 |   抢沙发  0 
文章评分 0 次,平均分 0.0

制作 wordpress 主题,我认为适应性和可扩展性很重要,即不同用户使用时不会出现溢出、排版混乱等问题。只有做到这样,才是一个合格的、适应性强的主题。下面进入重点。

当我们的导航菜单需要设置下拉菜单时,或许会要求宽度自适应,因为使用人不同,那么菜单项的内容就会不同,从而字数也不同,这时若定义固定的宽度,当字数超出定义宽度时,就会出现问题了,如何解决呢?采用下面的方法即可实现灵活变化。

一般情况下,带有下拉菜单的导航菜单是这样的一串代码:

<div class=”nav”>

   <ul>

      <li><a href=”#”>首页</a></li>

      <li><a href=”#”>新闻中心</a>

           <ul>

               <li><a href=”#”>国内新闻</a></li>

               <li><a href=”#”>xx </a></li>

               <li><a href=”#”>xxxxxx</a></li>

           </ul>

     </li>          

</ul>

</div>

若要实现 .nav ul li ul 的宽度随内容变化,需在 css 文件中做出以下定义:

.nav ul li ul{width:auto;}

.nav ul li ul li{display:inline;}

.nav ul li ul li a{display:inline-block; min-width:80px; white-space:nowrap;}

 

这里的 ul、li、a 会有写属性继承自上层,可根据自己需要定义。

注释:white-space:nowrap 表示不换行,直至遇到<br/>为止。

      min-width:80px  设置最小宽度,根据需要,可用可不用。

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

酷奇给酷奇打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付

本文来自投稿,不代表主题派立场,版权归原作者所有,欢迎分享本文,转载请保留出处!

酷奇
酷奇 关注:0    粉丝:0 最后编辑于:2023-05-20
这个人很懒,什么都没写

发表评论

表情 格式 贴图 链接 私密 签到 常用语
请选择评论常用语:
1、谢谢博主分享!
2、博主NB,666'
3、感谢楼主分享!
4、感谢大佬分享!
5、教程很好用,谢谢!
扫一扫二维码分享
×
艾瑞克网