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

导航菜单宽度自动缩短或扩散

1 个答案: