7

横のリストにディスクの箇条書きを表示したい。

display: inline;CSS：で定義すると、クラス定義：list-style-type: discが機能しないことを私は知っています。

だからこれが私の解決策でした：

                <ul>
                    <li>· EN</li>
                    <li>· ES</li>
                    <li>· ES</li>
                    <li>· DE</li>
                    <li>· FR</li>
                </ul>

シンボルディスクの箇条書きを手動で水平リストに入れてから、頭のセクションでそれを宣言しました<meta http-equiv="content-type" content="text/html;charset=utf-8" />。

私のcodaエディターのプレビューでは、見た目は問題ありませんが、ブラウザーを使用しようとすると、これが表示されます。

なんで？どうすれば問題を理解できますか？それ以外の場合、水平リストにディスクの箇条書きを表示するための最良の解決策は何ですか？

4

3 に答える 3

16

display:inlineあなたのために選択する代わりに、liそれらをブロックとして保持し、これを行うことができます:

li {
    float:left; 
}

次に、マージンを操作して、必要な間隔を空けることができます。

于 2012-11-08T15:20:52.327 に答える
5

display：inline-blockを試してください

CSS

ul li{
    display:inline-block;
}

IE6およびIE7で動作するには：

CSS

ul li{
    display:inline-block;
    zoom:1;
}
于 2012-11-08T15:21:22.113 に答える
2

あなたのアプローチの問題は2つあります。まず、使用している文字「・」は箇条書きではありません。これは、主にテキストのセパレーターとして、複数の用途を持つ MIDDLE DOT です。BULLET「•」の文字がより適しています。次に、UTF-8 を宣言していますが、これは問題ありませんが、実際にはドキュメントを UTF-8 でエンコードする必要があり、明らかにそうです (むしろ、ここから見ると、おそらく Windows-1252 でエンコードされています)。

しかし、エンコーディングの問題の解決を必要としない簡単な修正として、エンティティ参照を使用して BULLET を記述でき&bull;ます<li>&bull;&nbsp;EN</li>。

もちろん、他のアプローチもあります。しかし、 を設定display: inlineした場合、ブラウザは箇条書きを生成しません。これは、そのdisplay: list-item. :before箇条書きを要素のコンテンツに含めるか、生成されたコンテンツを (疑似要素を使用して) 使用する必要があります。

于 2012-11-08T17:04:20.010 に答える