1

次のようなCSSメニューがあります。

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

私はこれを作成したい:

|------------------------------------------------|
| | アイテム1 |
|------------------------------------------------|
| | 項目 2 |
|------------------------------------------------|
| | アイテム C |
|------------------------------------------------|
| | ここにかなり長いメニュー項目があります |
|------------------------------------------------|

しかし、私はこれを取得しています:

--------
| | アイテム1 |
| -----------
| | 項目 2 |
| -----------
| | アイテム C |
| --------------------------------------------------
| | ここにかなり長いメニュー項目があります |
 -----------------------------------

[li] または [a] タグのいずれかを display:block に設定すると、可能な最大幅を埋めるように引き伸ばされます。[ul] タグに手動で幅を設定するのではなく、最も幅の広い項目によって動的に決定される、すべての幅を同じにしたいのです。

ああ、ターゲットは IE6 です。:)

アップデート：

width:1px, overflow:visibleうまくいきませんでした。(表示なしと同じ押しつぶされた効果が得られます: ブロックされたアンカー)。

これは IE6 をターゲットとするイントラネット用であるため、そこで立ち往生しています。(他のプロジェクトでは気にしなくなりました。) JS は必須なので、それを使うかもしれません。（私はいつもそれをするのが嫌いです。）

4

4 に答える 4

6

これは非常に単純です。

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

ここでの秘訣は、<ul> のフローティングと空白の追加の組み合わせです。ブロックされたアンカーに。実際、 <ul> がスペースを争っていない限り、「nowrap」は必要ありません。訪問者の 12% を無視するという提案については..まあ...

于 2008-11-19T02:00:07.800 に答える
1

width：autoが実際に正しく機能しなかったため、IE6で機能させるためのある程度のハッキング。

私はwidth：1pxを使用してこの問題のいくつかの解決策を見てきました。overlay：visible;。これはこの場合は機能する可能性がありますが、「実際の」ブラウザに詰め込まれないように、またはホリーハックなどを使用しないように条件付きコメントで行うのが最善です。IE 6は、クァークズモードと標準モードでこれを異なる方法で処理する可能性があることに注意してください。そのため、Doctypeを知っておいてください。

ところで、アンカータグをブロックとして配置するので、一貫した幅のマウスターゲットを取得できます。

于 2008-11-18T21:42:37.133 に答える
1

あなたの唯一のオプションはjavascriptです。

ところで、私のサイトの 1 つに多数のホーム ユーザーがアクセスしています。IE6 がトラフィックの 12% まで減少したことがわかりました。2 か月前は 20% でした。これは、全体的な IE トラフィックが 76% にとどまっている間です。

私が言いたいのは、おそらく IE6 の癖についてあまり心配する必要はないということです。

于 2008-11-18T21:39:10.713 に答える
1

純粋な CSS で幅が不均一なul内でシュリンクラップされたliを取得するには、次を試してください。

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

（その後、固定された行の高さと繰り返しの背景画像を使用して、偽の列を適応させて、 li要素のスタイルを設定することができます）

IE のみであることが確実な場合は、動的プロパティを使用して JavaScript を CSS に組み込み、子の幅を親と一致するように設定できます。

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}
于 2008-11-18T22:13:10.987 に答える