0

导航菜单宽度会随着 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>

4

1 回答 1

0

现场演示

朋友这里是你的代码。始终使用重置 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 文件

于 2012-11-09T13:23:25.540 回答