1

言語翻訳プラグインを使用するサイトで、それ以外の典型的な CSS ナビゲーション メニューを使用しています。一部の翻訳は他の翻訳よりも長くなり、その結果、いくつかの li 項目が 2 行の長さであるのに対し、兄弟の li はまだ 1 行の長さであるという問題が生じます。親の UL は、長いアイテムに対応するために垂直方向に伸びますが、短い兄弟の li は 1 行の長さしかないため、スタイルが正しくありません。

これは言葉で説明するのは難しいです。スクリーンショットを見る: css スクリーンショット http://dl.dropbox.com/u/6448156/CAP-hover.png

ご覧のとおり、2 ライナーは問題ありませんが、兄弟の 1 ライナーは親の UL の高さを引き継ぐ必要があるため、右側の白い境界線が完全に下に移動し、ホバー状態も完全になります。道を下る。

親の UL の高さを 100% 満たすようにこれらの li アイテムをスタイルするにはどうすればよいですか? (高さを 100% に設定すると、それ自体の 100% に設定されるため)

http://cap.wizzywighost.com/?s=post&lang=frで実際のサンプルを見ることができます。

これで手が大好きです。ありがとう！

4

3 に答える 3

1

最も簡単な解決策は、border-right: 1px solid #fff を子 a ではなく、li のプロパティに設定することです。

今すぐコードは次のようになります。

a{... border-right: 1px solid #fff ...}

次のようにしたい: li{... border-right: 1px solid #fff ...}

{...}

于 2012-07-08T13:03:54.940 に答える
0

高さ計算の仕様を見てみましょう。

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は「auto」と計算されます。

親に明示的な値を設定していないことを考えると<ul>(...まあ、できません。事前に最も高いボックスの高さがわからないため)、height:100%;メニュー項目は無視されます。

そのナビゲーション ブロックをテーブルとしてレンダリングしても、上記の影響を受けません。おそらくメニュー内のナビゲーション項目も垂直方向に揃えたいと考えると、ここでテーブルを使用することは恥ずべきことではありません。特に、たとえばdisplay:table*;スタイルを使用するのではなく、サポート範囲が最も広いことを考えると.

アップデート：

テーブルを使用できないというコメントを見ました。垂直方向の配置をあきらめても構わない場合は、偽の列を実装するのが簡単なトリックです. これが行うことは、パディングを使用してメニュー項目のレンダリングされた高さを増やしますが、負のマージンで取られたレイアウト スペースをオフセットすることです。

.menu-item, .menu-item a {
    padding-bottom:999px !important;margin-bottom:-999px !important;
}

!importantこれらのプロパティが正しいルールに追加されている限り、実際に使用する必要はありません。IMOこれは、使用できる最も簡単な高さに依存しない修正です。

于 2012-05-30T02:29:17.313 に答える
0

最初の 1 つは、クラスdiv.nav ul li aにmin-height:50px:を定義したところです。

以下で言及するように、更新されたCSS

div.nav ul li a {
    border-right: 1px solid white;
    color: white;
    display: block;
    min-height: 50px;
    padding: 5px 10px 3px;
    text-decoration: none;
    width: 167px;
}

このクラスでcssを更新すると、目的の結果が得られます。これを見ていると思います.....

2番目の方法

幅と高さを使用せずにパディングで遊んだので、代替方法も確認できます... 2番目の方法CSSを確認してください

div.nav {
    background: none repeat scroll 0 0 #89BFE4;
    clear: both;
    color: #FFFFFF;
    font-size: 18px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 199;
}
div.nav ul {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}
div.nav ul li:hover {
    background: none repeat scroll 0 0 #FF9900;
}
div.nav ul li {
    border-right: 1px solid white;
    float: left;
    padding: 10px;
}
div.nav ul li a {
    color: white;
    display: block;
    text-decoration: none;
}
div.nav ul li:last-child a {
    border-right: medium none;
}
div.nav ul li a:hover, div.nav ul li:hover > a {
    color: white;
}
.current-menu-item {
    background: none repeat scroll 0 0 #FF9900;
}
div.nav ul ul {
    background: none repeat scroll 0 0 #FF9900;
    display: none;
    left: 93px;
    position: absolute;
    top: 42px;
    width: 250px;
    z-index: 200;
}
div.nav ul ul li {
    clear: left;
    position: relative;
    text-align: left;
}
div.nav ul ul li:hover, div.nav ul ul li:hover a {
    color: #FF9900;
    background: none repeat scroll 0 0 white;
}
div.nav ul ul li a, div.nav ul li.active li a {
    color: white;
    width: 250px;
}
div.nav ul ul li a:hover, div.nav ul li.active ul li a:hover, div.nav ul li:hover ul li a:hover, div.nav ul li.hover ul li a:hover {
}
div.nav ul > li:hover > ul, div.nav ul > li.hover > ul {
    display: block;
}

これがあなたにとっても役立つことを願っています。あなたの質問の最も近い解決策を提供しようとしました....

于 2012-05-30T06:25:41.583 に答える