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 に答える