3

私は順序付きリストを持っています:

<ol>
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li>
<li>This is the Second g</li>
<li>This is the Third g</li>
<li>This is the fourth g</li>
<li> <strong>This is the fifth g</strong> </li>
<li>This is the seventh g</li>
<li>This is the eight g</li>
<li>This is the ninth g</li>
<li>This is the tenth g</li>
<li>This is the eleventh g</li>
<li>This is the twelvth g</li>
</ol>

次のように表示されます。

1.  They used to bring concerns about their children or their marriages. But
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran
    minister in Springfield, Ill., about their financial worries, and that puts
    him in the unusual position of dispensing investment advice.
2.  This is the Second g
3.  This is the Third g
4.  This is the fourth g
5.  This is the fifth g
6.  This is the seventh g
7.  This is the eight g
8.  This is the ninth g
9.  This is the tenth g
10. This is the eleventh g
11. This is the twelvth g

最初の項目のようにテキストが多い場合は、上記のようにフォーマットしたいと思います。次のように設定することでこれを達成できました：

list-style-position:outside;

li タグと ol タグの余白を調整します。ただし、これは、2 桁または 3 桁の場合、いくつかの悪影響を及ぼしました。IE では数字が切り捨てられていたので、これらの余白を使用する必要がありました。list-style-positionof を使用しinsideて余白を削除できるようにしたいのですが、テキストが数値の下で折り返されてしまいます。これは私が望むものではありません。

このラッピングをオフにする方法を知っている人はいますか?

4

4 に答える 4

4

これを試して：

li { 
  white-space:nowrap;
}
于 2009-03-24T14:33:59.797 に答える
3

list-style-position:outside;順序付けられていないリストを使用している場合、使用はより実行可能になります。これは、マーカーに常に同じ量のスペースを使用します。あなたは順序付きリストを使用しているので、私は固執しlist-style-position:inside;ます. あなたが発見したように、問題は、マーカーの桁数やフォントのサイズに関係なく、IE と Firefox がマーカー用に同じ量のスペースを作ることです。そのため、自分でスペースを作成して、自分の手で問題を解決する必要があります。ここでの秘訣は、IE と Firefox が既定で異なるプロパティを使用してスペースを作成することを知っておくことです。IE は(30 ポイント) を使用marginし、Firefox は(40 ピクセル) を使用するため、クロスブラウザーの幸福を実現するには、これらの両方の値をリセットする必要があります。<ol>padding

これを試して：

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}
于 2009-03-24T15:44:56.833 に答える
2

問題は、 list-style-position:inside 「マーカーとテキストをインデントする」ことです。したがって、それを使用してやろうとしていることを達成することは決してありません。( http://www.w3schools.com/CSS/pr_list-style-position.asp ) したがって、list-style-position:outside しか選択できません。

問題が、最大 9 項目 (1 桁) のリスト、最大 99 項目 (2 桁) のリスト、最大 999 項目 (3 桁) のリストなどがある場合です。 2 つの選択肢:

オプション 1: リストごとに異なるクラスを作成します (カウントが事前にわかっていると仮定します)。数字 1、数字 2、数字 3 などと呼ぶかもしれません。

<ol class='digits1'>
  <li>item</li>
  ...
</ol>

オプション 2: リストを完全に放棄し、テーブルのみを使用します (私は知っています)。ただし、リスト内の項目数に関係なく、適切な折り返しとインデントが保証されます。

于 2009-03-24T15:13:10.483 に答える
1 
li { white-space: nowrap; }

これにより、テキストが同じ行に表示されます。他のものも横方向に拡大する可能性があります。

li { overflow: hidden; }

この場合はおそらく関係ありませんが、LI 要素の固定幅を超えるテキストは非表示になります。

ブレークワードも参照してください。

li { word-wrap: break-word }

ただし、このセレクターには IE でいくつかの問題があると思います。

于 2009-03-24T14:37:13.283 に答える