2

HTML、CSS、PHP、および MySQL を使用してサイトを作成しようとしています。ヘッダー内にナビゲーションメニューを中央に配置したリキッドレイアウトを設計しようとしています。Google Chrome では、デザインがうまく機能します。しかし、Firefox と IE では、リスト項目の最後が新しい行にドロップダウンします。この問題を解決するにはどうすればよいですか?

以下にコード スニペットを添付します。

メニューの CSS スタイル:

.menu {
    float:left;
    width:100%;
    background-image:url(../images/menu_bg.gif);
    background-repeat:repeat-x;
    min-width:750px;
    min-height:81px;
    overflow:hidden;
    position:relative;
    }

.menu ul{
    clear: both;
    float:left;
    list-style:none;
    text-align:center;
    left:50%;
    position:relative;
    display:inline-block;
    white-space: nowrap;
    }

.menu > ul > li { 
     float:left;
     right: 50%;
     position:relative;
     list-style:none;
}

.menu > ul > li > a {
    display:block;
    color:#ff3;
    text-decoration:none;
    background:transparent;
    padding:0 0 0 10px;
}

.menu > ul > li > a b {
    display:block;
    background:transparent;
    padding:0 10px 0 10px;
}

**********************************

css styles for Header:


#header {
    background-image:url(../images/header_bg.gif);
    background-repeat:repeat-x;
    height:160px;
    min-width:750px;
}

#logo {
    background-image:url(../images/logo.gif);
    background-position:10px 10px;
    background-repeat:no-repeat;
    height:79px;
}

*******************************************************

body: 

<div id="header">
  <div id="logo"></div>
  <div class="menu">
  <ul>
    <li class="current"><a href="../index.php"><b>Home</b></a></li>
    <li><a href="../about/about.php"><b>About Us</b></a></li>
    <li><a href="../services/services.php"><b>Services</b></a></li>
    <li><a href="../shop/shop.php"><b>Tech Shop</b></a></li>
    <li><a href="../downloads/downloads.php"><b>Downloads</b></a></li>
    <li><a href="../knowledge/knowledge.php"><b>Knowledge Base</b></a></li>
    <li><a href="../contact/contact.php"><b>Contact Us</b></a></li>
    <li><a href="../Livehelp/livehelp.php"><b>Live Help</b></a></li>
  </ul>   
  </div>
</div>
********************************
4

1 に答える 1

-1

左を削除:50%; と右: 50%; 彼らは無意味です

于 2012-05-29T11:50:54.587 に答える