导航菜单的宽度会随着li元素的宽度自动缩短或扩展。
我的最后一个li元素是登录用户,当用户使用的用户名带有更多字母时,我希望菜单扩展到足以容纳该字母,而当用户名使用的字母更少时,菜单也是一样。



     require_once 'classes/User.php';

     $user = User::getById($_SESSION['user']['uid']);
     ?>
    <div id='cssmenu'>
    <ul>
       <li class=><a href='index.php'><span>Home</span></a></li>
       <li class=><a href='add.php'><span>Add</span></a></li>
       <li><a href='test.php'><span>Test</span></a></li>
       <li><a href='help.php'><span>Help</span></a></li>
       <li class="last"><a href='user.php'><span><?php print $user->getUsername()?></span></a>
    <ul>
         <li><a class="settings" href='user.php'><span>Settings</span></a></li>
         <li><a class="adduser" href='useradd.php'><span>Add User</span></a></li>
         <li><a class="logout" href='logout.php'><span>Log Out</span></a></li>
  </ul>

最佳答案

LIVE DEMO

朋友在这里是您的代码。始终使用重置CSS。

HTML:

<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
<div class="clear"></div>
</div>


CSS:

.menu{background:#999; border:1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float:left;}
.menu ul{list-style:none;}
.menu li{float:left;}
.menu a{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#dcdcdc; padding-left:30px; padding-right:30px; line-height:40px;}
.menu a:hover{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#000; padding-left:30px; padding-right:30px; line-height:40px;}
.clear{clear:both;}



  使用reset.css文件

10-07 19:14
查看更多