2

3 レベルの深さのネストされた UL を使用してツリー メニューを作成します。ボトムス 2 レベルは、デフォルトで非表示/折りたたまれています。下の 3 番目のレベルは、「左」と「右」の値の比較を示しています。すべての「左」スパンを同じ幅にしたいのですが、固定幅にはなりません。そのようなすべてのスパンの最大幅を見つけるためのjqueryループについて考え、戻ってすべてをその最大幅に設定しました。しかし、非表示の場合、jquery width() は常に 0 です。したがって、最初にリスト全体を展開し、この作業を行ってから、もう一度折りたたむ必要があります。それでも、jquery を介して幅を設定しても何も起こらなかったようです。スパンには style="width: 93px;" があります 実際の幅は変わりませんでした。これらの要素の幅をリンクする CSS2/3 の方法はありますか? それともより良いJavaScriptの方法ですか？

<ul class="hidden">
  <li>
    <span class="left">cat</span>
    &hArr;
    <span class="right">dog</span>
  </li>
  <li>
    <span class="left">bird</span>
    &hArr;
    <span class="right">horse</span>
  </li>
  <li>
    <span class="left">some long text</span>
    &hArr;
    <span class="right">more long text</span>
  </li>
</ul>

span.left{text-align:right;}
ul.hidden{display:none;}
4

2 に答える 2

2

テーブル セルとして表示するために CSS プロパティを使用できます (例: http://ajaxian.com/archives/display-table ) が、実際には意味的にテーブルとは何かを説明しています。表のマークアップだけを使用しないのはなぜですか? 呪われたものでもなんでもない。

于 2012-07-16T16:37:55.027 に答える
1

左のスパンを div に変更し、「左」クラスの幅を次のように設定することをお勧めし min-width:100px;ます。タグの変更の理由は、span タグは通常、テキストのスタイリングを追加する場合に便利ですが、幅、高さ、マージン、パディングなどを適用する場合には便利ではないためです...それは私の意見に基づく私の意見ですでも経験。

編集

考えられる解決策:非表示の ul に境界線を設定し、min-width プロパティを使用すると、リスト全体の幅が最大のリスト項目に基づいて変更されます。

于 2012-07-16T16:36:12.190 に答える