内部で改行せずに li のセンタリングを実現するにはどうすればよいですか? (liの長さは固定されていません)_html/css_WEB-ITnose

現在、li タグを使用し、li の display:inline; を設定しています。ただし、li の長さが長すぎると、2 行目に達すると折り返されます。注: 1. これはバックグラウンドでデータを読み取ることによって動的に生成されます。つまり、li の数も各 li の長さも固定されていません
2. 各行は全体として中央に配置される必要があります。 li は内部でラップされません
3. わかりません。ネットワークの問題ですか、CSDN プログラムの問題ですか? 写真をアップロードできません

ディスカッションに返信 (解決策)

わからない。 。コードを投稿して見ていただけますか?

1. li 内に行の折り返しがない場合、データの量が現在の li の最大幅を超えている場合、問題が発生します。それとも表示されないの？

2. 発言した内容がすべて中央に配置されている場合、行の折り返しの問題は発生しません。データは前処理され、対応する長さがインターセプトされます。

nowrap を設定しても改行は発生しません。

li {    display: inline;    white-space: nowrap;}

改行なしの CSS を ul に追加して試してください

#ul {white-space:nowrap; width:920px; overflow:hidden;text-overflow:ellipsis;}#li {*float:left; width:90px; margin:0 5px; *clear:right; text-align:center; display:inline-block}

私の ul は div コンテナの幅に自動的に適応することに注意してください。私のコードは以下に掲載されています。はい、ページが変わると変化します。望ましい効果は、ラベルが中央に配置され、li の内側に折り返されないことです。ただし、li のこの行の幅が十分でない場合は、実行できる必要があります。次の行

rree

nowrap を追加すると言ったのですが、合格しましたか?

オンライン デモ コード

私のコードは div コンテナーの幅に自動的に適応することに注意してください。外部 div の幅は動的であり、ページの変更に応じて変化します。中央揃えでは、li 内で折り返される行はありませんが、li のこの行の幅が十分でない場合は、次の行に実行できる必要があります。IE6 の場合。 , 7, LI は自動的に折り返す必要はありません。また、幅が 2 行以上ある場合は、2 行目の単語も中央に配置されます。

display:inline-block

to li

nowrap を追加するように言いましたが、試してみましたか?
オンライン デモ コード

私のコードは動的に div コンテナーの幅に適応することに注意してください。望ましい効果は次のとおりです。ただし、この li の行の幅が足りない場合は、次の行まで実行できる必要があります

プログラミングを何年やっていますか? ? ? ?私のニーズを理解しましたか？ ? ? div幅はダイナミック、ダイナミックです！ ！ ！ブラウザウィンドウを縮小してから、再度縮小してください

display:inline-block li に渡してください

ナンセンス 自分で試してみてください!

display:inline-block

Give li

ナンセンス 自分で試してみてください!

ブロックする必要があります
inline はインライン要素を意味するため、インライン要素は行をまたぐことができます (1 行を超えて次の行に印刷される自然なテキストと同様)

ブロックは行をまたぎません (もちろん、コンテンツの高さは拡張されます) ） つまり、あなたの質問は、ブロック内のテキストは折り返されずに1行だけ表示されます



.bNav ul li {
display: inline-block;
display:inline-table; padding: 0;

margin-right: 15px;
margin-left: 10px;
text-overflow: ellipsis;
White-space: nowrap; }
3 つのディスプレイはすべて動作しているようです



display:inline-block

リーにあげてください

でたらめ、自分で試してみてください!

ブロックする必要があります

inline はインライン要素を意味するため、インライン要素は行をまたぐことができます (1 行を超えて次の行に印刷される自然なテキストと同様)
ブロックは行をまたぎません (もちろん、コンテンツの高さは拡張されます) )

それであなたの質問は ブロック内のテキストは改行なしで 1 行だけ表示されます


私が欲しいのは、なぜそんなに話しているのですか? または解決策を教えてください

見てください。 12階~~~~

まず第一に、私はプログラマーではありません、プログラミングもしたことがあります。
次に、.bNav ul li スタイルで空白の行を追加することを除いて、他のコードはすべて上に投稿したものです。ですから、私があなたが試したことがないと言っても、おそらくあなたに対して不公平にはならないでしょう。
以下は、上記のデモ コードの動的なスクリーンショットです。ブラウザ ウィンドウがどのように縮小するかが明確にわかります。
1) div の幅が動的に変化するかどうか
2) 各 li ノートが中央に配置されるかどうか
3) li 改行はありませんか? 4) この行の幅が足りない場合、次の行に続きますか?何年くらい手続きをしているのか分かりませんが？問題解決に対してこれほどひどい態度をとる人に出会ったのはあなたが二人目です。


手続きを何年していますか？ ? ? ?私のニーズを理解しましたか？ ? ? div幅はダイナミック、ダイナミックです！ ！ ！ブラウザウィンドウを縮小してから、再度縮小してください

まず第一に、私はプログラマーではありません、プログラミングもしたことがあります。

次に、.bNav ul li スタイルで空白の行を追加することを除いて、他のコードはすべて上に投稿したものです。ですから、私があなたが試したことがないと言っても、おそらくあなたに対して不公平にはならないでしょう。

以下は、上記のデモ コードの動的なスクリーンショットです。ブラウザ ウィンドウがどのように縮小するかが明確にわかります。
1) div の幅が動的に変化するかどうか
2) 各 li ノートが中央に配置されるかどうか
3) li 改行はありませんか? 4) この行の幅が足りない場合、次の行に続きますか?何年くらい手続きをしているのか分かりませんが？問題解決に対してこれほどひどい態度をとる人に出会ったのはあなたが二人目です。



手続きは何年くらいやってますか？ ? ? ?私のニーズを理解しましたか？ ? ? div幅はダイナミック、ダイナミックです！ ！ ！ブラウザウィンドウを縮小してから、再度縮小することもできます

ドラッグしたくない場合は、IE6、IE7、IE8、IE9、IE10 を含む 12 階もあります。 IEはそれを処理できません。何をしているのですか？

Nowrap の追加について言及しましたが、試してみましたか? オンライン デモ コード

私のコードは動的に div コンテナーの幅に適応することに注意してください。望ましい効果は次のとおりです。ただし、この li の行の幅が足りない場合は、次の行まで実行できる必要があります

使用しているブラウザは比較的高機能であるようです。申し訳ありませんが、お客様のほとんどはまだ互換モードで IE を使用しています

私は何もしていません、純粋にビジネスの趣味としてこれをプレイしています
申し訳ありませんが、これは私の上級ではありません。ブラウザ、Google Chrome は多くの人に使用されていますが、聞いたことがないとは言わないでください。

参考: IE6 CSS 表示:テーブルの修正? 以下の動的スクリーンショットは、Win 8.1 でシミュレートされた低バージョンのブラウザーです。実際の ie6、ie7、ie8、ie9、ie10 では有効ではない可能性があります。ご興味がございましたら、デモの結果をクリックして、ie6、ie7、ie8、ie9、および ie10 と互換性を持たせることができます。

IE 互換モードを試していただけますか? ie6、ie7、ie8、ie9、ie10、ie などの 12 階もあります。何をしていますか?



私は何もしていません。純粋にビジネスの趣味としてこれをプレイしています

申し訳ありませんが、高性能なのは私のブラウザではありません。Google Chrome は多くの人に使用されています。聞いたことがないとは言わないでください。

参考: IE6 CSS 表示:テーブルの修正? 以下の動的スクリーンショットは、Win 8.1 でシミュレートされた低バージョンのブラウザーです。実際の ie6、ie7、ie8、ie9、ie10 では有効ではない可能性があります。ご興味がございましたら、デモの結果をクリックして、ie6、ie7、ie8、ie9、および ie10 と互換性を持たせることができます。

IE互換モードを試してみませんか? ie6、ie7、ie8、ie9、ie10を含む12階もありますが、ieは処理できません。

私は何もしていません。純粋にビジネスの趣味としてこれをプレイしています

申し訳ありませんが、高性能なのは私のブラウザではありません。Google Chrome は多くの人に使用されています。聞いたことがないとは言わないでください。 参考: IE6 CSS 表示:テーブルの修正?
以下の動的スクリーンショットは、Win 8.1 でシミュレートされた低バージョンのブラウザーです。実際の ie6、ie7、ie8、ie9、ie10 では有効ではない可能性があります。ご興味がございましたら、デモの結果をクリックして、ie6、ie7、ie8、ie9、および ie10 と互換性を持たせることができます。

IE互換モードを試してみませんか? ie6、ie7、ie8、ie9、ie10を含む12階もありますが、ieは処理できません。



慎重にテストして比較した結果、CSS にズーム機能があることがわかりました。これはおそらく IE のバグです。要するに、問題は解決されました！まずZoomを使うというアイデアを思いついたきっかけを教えてください。本当に使ったことがないんです。 。 。全てをあなたに捧げましょう！

最初はZoomを使うことを考えていませんでした。上で私はプログラマではないと言ったため、この解決策はIE6との互換性を尋ねられたときにオンラインで検索されました。はい、回答者は各 CSS の機能も示しました。
他の人の問題解決を手助けすること自体は幸せなことですが、問題解決を手助けしようとすると、質問者に「理解できない」「話すな」と言われ、とても不幸な気分になります。その結果、返信するときにいくつかタイプミスをしてしまいました。本来は「私はプログラマーではありません、そしてプログラミングをしたことがありません」という意味でしたが、「私はプログラマーではありません、そして私もプログラミングをしたことはありません」となっていました。プログラミングは完了しました。」 これは、もともと彼は「私は何もしていません、私は純粋に趣味としてこれをプレイしています」と言ったのを意味しましたが、最終的には「私は何もしていません、私は純粋にビジネスの趣味としてこれをプレイしています」と言いました。
最後に、zoom の機能は、表示がインラインである li ノードの IE 固有の hasLayout 属性をトリガーすることです。
問題を解決しても、実行しても、それを大切にしても大丈夫です。

慎重にテストして比較した結果、CSS にズーム機能があることがわかりました。これはおそらく IE のバグです。要するに、問題は解決されました！まずZoomを使うというアイデアを思いついたきっかけを教えてください。本当に使ったことがないんです。 。 。全てをあなたに捧げましょう！