导航菜单宽度会自动缩短或传播

Question

导航菜单宽度会自动缩短或随着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>

Answer 1

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文件