3

フロートされたul/li（）のメニューがあります。これは幅を変更したものですが、含まれているdivの幅全体を埋めたいと思います。

コード：

#main-content ul.jwts_tabbernav {  
    display: block;
    margin-bottom: 20px;
    text-transform: uppercase; 
    text-align: center; 
}

#main-content ul.jwts_tabbernav li a,
#main-content ul.jwts_tabbernav li a:link, 
#main-content ul.jwts_tabbernav li a:hover {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #734C2F; outline: 1px solid #734C2F;
    color: #734C2F;
    font-size: 12pt;
    font-weight: bold; 
    margin: 0;
    padding: 3px 35px;
}

開発ページ（2つの異なるメニュー幅）：

http://www.kaplareva.com/polarinvest/?p=224

http://www.kaplareva.com/polarinvest/?p=227

これをどのように解決できるか考えていますか？

4

3 に答える 3

2

次の変更により、リスト項目が拡張されてコンテナーがいっぱいになります。

ul {
    display:table;
    width:100%;
}

li {
    display:table-cell;
}

a {
    display:block
}

1 つの注意点は、display:table-cellとdisplay:tableが IE6/7 でネイティブにサポートされていないため、これらのブラウザーをサポートする必要がある場合は、別のソリューションが必要になることです。IE6 の使用率がわずか 7.1% に、IE7 の使用率が 2.54% にまで低下したことから、 IE6をサポートするデザイナーがますます少なくなっていることがわかります。

于 2012-05-17T08:54:35.853 に答える
0

表示ブロックを設定する

#menu a {
    display: block;
}
于 2012-05-17T08:50:06.103 に答える
0

私があなたを正しく理解していると仮定すると、a要素内にli要素を作成するだけですdisplay: block:

#main-content ul.jwts_tabbernav li a,
#main-content ul.jwts_tabbernav li a:link, 
#main-content ul.jwts_tabbernav li a:hover {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #734C2F; outline: 1px solid #734C2F;
    color: #734C2F;
    font-size: 12pt;
    font-weight: bold; 
    margin: 0;
    padding: 3px 35px;
    display: block;
}
于 2012-05-17T08:40:07.543 に答える