2

水平メニュー ナビゲーションがあります。

ここに画像の説明を入力

コードは次のとおりです。

<div class="menu-holder">
    <ul class="menu"> 
        <li>
            <a href="#">Home</a> 
        </li>
        <li>
            <a href="#">Profile</a> 
        </li>
        <li>
            <a href="#">Billing</a> 
            <ul class="submenu"> 
                <li><a href="#">New</a></li> 
                <li><a href="#">Find</a></li>                         
            </ul>
        </li>
        <li>
            <a href="#">Workspaces</a> 
        </li>
        <li>
            <a href="#">Manage Leaves</a> 
        </li>
        <li>
            <a href="#">Blogs</a> 
        </li>
        <li>
            <a href="#">News</a> 
        </li>
        <li>
            <a href="#">Search</a> 
        </li>              
        <li>
            <a href="#">Albums</a> 
        </li> 
    </ul>         
</div>

CSS:

ul.menu {
    list-style: none;
    padding: 0 20px;    
    margin: 0;
    float: left;
    width: 960px;
    background: #222;
    font-size: 1.2em;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;    
    behavior: url(CSS3PIE);
}
ul.menu li {
    float: left;
    margin: 0;  
    padding: 0 15px 0 0;
    position: relative; 
}
ul.menu li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.menu li a:hover{
    background: url(Images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span { 
    width: 17px;
    height: 35px;
    float: left;
    background: url(Images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;} 
ul.menu li ul.submenu {
    list-style: none;
    position: absolute; 
    left: 0; top: 44px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border-radius: 5px; 
    -webkit-border-radius: 5px;
    border: 1px solid #111;
    behavior: url(CSS3PIE);
}
ul.menu li ul.submenu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both;
    width: 170px;
}
html ul.menu li ul.submenu li a {
    float: left;
    width: 145px;
    background: #333 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover { 
    background: #222 url(Images/dropdown_linkbg.gif) no-repeat 10px center; 
}

このナビゲーションの作成には jQuery も使用されています。

今、私はliを完全にUIにしたいと思っています。ただし、li に固定幅を適用しません。ログインしているユーザーの役割に応じて表示される別のメニュー項目 (写真にはありません) もあるためです。

出来ますか？

ここに画像の説明を入力

4

2 に答える 2

3

これを解決する最善の方法は、のdisplay: table/table-cell代わりに使用することだと思いますfloat: left。ここにフィドルがあります：http://jsfiddle.net/nk7yY/

基本的に、コードで変更する内容は次のとおりです。

ul.menu {
    display: table;
    width: 100%; /* Tables are not 100% width like block elements */
    /* Everything you already had except float: left; which I don't really get why you have to begin with */
}

ul.menu li {
    display: table-cell;
    /* Everything you already had except float: left; */
}

ul.menu li a {
    /* Just remove the float here as well */
}

編集：これは古いIEでは機能しませんが、フロートを保持できます（*floatたとえば、ハックを使用）。

于 2012-04-08T13:38:29.783 に答える
1

9 つの ul.menu li 要素があり、10 番目の要素があると言っているのですか? そして、ul.menu の幅を埋めるために 9 つ (または 10 つ) をすべてまとめたいと思いますか?

それともul.submenuについて話しているのですか？

「UI を完全にカバーする li を作成する」と言うだけでも、単一の <li> でナビゲーション UI の幅全体をカバーしたいように聞こえます (UI の他の部分ではなく <ul> を想定しています)。

これはあなたがやろうとしていることですか？それとも、9 個または 10 個の <li> 項目すべてで <ul> のスペースを埋めるだけですか?

その場合は、ログインしたユーザーの役割に応じて変更されるクラスを <ul class="menu"> に配置して、それに応じてスタイルを調整できるようにする必要があります。

何をしようとしているのか、どのブラウザをサポートしたいのか、つまり CSS3 についてもう少し情報を提供してください。

于 2012-04-08T13:18:42.267 に答える