实现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.cnblogs.com/bnxf1/archive/2013/05/23/3095180.html