1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

实现wordpress主题下拉菜单宽度自适应方法

制作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  设置最小宽度,根据需要,可用可不用。

原文链接:https://www.qiquanji.com/post/7525.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: