6

フロートリストに表示しているアイテムのリストがあります。リスト内の各アイテムは固定幅であるため、行ごとに2つあります。この恐ろしいことが起こらないようにするためのベストプラクティスは何ですか。

代替テキストhttp://x01.co.uk/floated_items.gif

可能性：

  • データを表示する前に、指定された文字数にトリミングしてください。「安全」な文字数を推測する必要があります。
  • オーバーフロー：非表示。ハッキー。
  • 背景を削除し、各アイテムに上部の境界線を付けます。

可能だがばかげている：

  • オーバーフローを実行して、各アイテムにスクロールバーを設定します。auto、これは恐ろしいように見えます。
  • コンテナに背景画像を追加します。アイテムの数が常に同じであるとは限らないため、このオプションは使用できません。

この苛立たしい問題についての助けはありがたいです！

4

6 に答える 6

2

固定フォント サイズ、つまり px で指定されていますか? そうでない場合は、各ブラウザーのさまざまなテキスト サイズ オプションも考慮する必要があります。これにより、文字列をトリミングするという概念が冗長になる可能性があります。それが修正された場合、おそらくあなたが収まるWの数を確認し、テキストを-3に制限し、省略記号を追加します.このリストが何のためのものかわからないので、それが1つのアプローチです.

個人的には、すべての不測の事態をカバーし、常にレイアウトの一貫性を保つため、overflow:hidden を使用するでしょう。

最後のオプションは、リストに追加できるものを厳密に制御し、問題の発生を最初から防ぐことだと思います。彼らが言うように、予防は治療よりも優れていますが、おそらく役に立たないでしょう。

于 2008-11-06T16:26:43.833 に答える
1

liを2つのブロックで比較し、両方を最も高いものに等しくすることで、これを支援するスクリプトがあります。

通常、cssの観点から何が最善かを考えるのではなく、必要なプレゼンテーションを検討してから、css/JavaScriptを取得して目的の効果を得る必要があります。

これが邪魔にならないようにしたい場合は、liの上部を強調表示し、実際に塗りつぶさずにブロックを提案するグラデーションの背景画像を使用することを検討してください。

jQueryソリューションへのリンクの追加：イコライズ

于 2008-11-06T16:32:07.210 に答える
0

1 つの解決策は、最後の 10 ピクセル程度で、テキストをコンテナの背景色に徐々にフェードさせるアルファベースの PNG を用意することです。一部のテキストが長いテキストよりもかなり短い場合は見栄えがよくなりますが、テキストがコンテナーと等しい場合は、ちょっとばかげて見える可能性があります。

もちろん、display: hidden と white-space: no-wrap との組み合わせで

于 2008-11-06T16:51:48.730 に答える
0

アクセシビリティの観点からは、単にタイトルを非表示にすることはお勧めできません。なぜなら、視力が悪いためにフォント サイズを大きくしている人のコンテンツが非表示になる可能性があるからです。あなたのデザインは、解像度が低い場合や同様の障害物にぶつかった場合に浮くことができる必要があります。

背景画像に関する問題を正しく理解できれば、ALA のスライド ドアに関する記事で説明されているテクニックを使用して問題を解決できると思います。背景画像はコンテンツとともに拡大します。

于 2008-11-07T11:22:06.757 に答える
0

ここにいくつかの論争があります.. テーブルを使用しますか?

あなたはデータのグリッドを持っているように聞こえますが、テーブルはこの問題に答えてくれますか?

また、アイテムを実際に同じ高さにしたいのか、それとも同じ量の黒い背景を背後に置きたいのかという疑問も生じます。行の背景に黒を適用してから、境界線と余白を含む中央の白いセパレータを作成できます。

于 2008-11-07T11:26:36.577 に答える
0

あなたは使用してみることができます：

ul li{
  display:block;
  float:left;
  width:6em;
  height:4em;
  background-color:black;
  color:white;
  margin-right:1em;
}
ul{
  height:100%;
  overflow:hidden;
}
div{
  height:3em;
  overflow:hidden;
  background-color:blue;
}

ただし、クロスブラウザの一貫性については知りません。編集:これは私が想定しているhtmlです:

<div>
<ul>
<li>asdf
<li>asdf trey  tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>
于 2008-11-08T17:43:52.370 に答える