ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSはlist-style-type属性を使用してテキストの後ろに表示します

CSSはlist-style-type属性を使用してテキストの後ろに表示します

黄舟
黄舟オリジナル
2017-06-29 13:45:341850ブラウズ

CSS は list-style-type 属性を使用してテキストの後ろに表示します

日付に表示される黒い点の問題は何ですか?

CSSはlist-style-type属性を使用してテキストの後ろに表示します

最初のケースでは、list-style- を直接変更します。位置: 外側 ; そうでない場合は、 list-style-position:inside を追加します。

方法 2: list-style-position:outside; の場合にリスト シンボルを表示する場所を残しておきます。たとえば、2 番目のケースでは li margin-left: 50px; に属性を追加します。要素を直接浮動させるだけです。

拡張子: list-style-type: リストのスタイルを定義します
disc: ドット
circle: 円
square: 正方形
10 進数: 1、2、3、...、11、12、13 などの数値
10 進数先行ゼロ: 10 進数。2 桁未満は先行 0 で埋められます。例: 01、02、03、...、98、99
Lower-roman: 小文字のローマ字テキスト。例: i、 ii、iii、iv、v、...
大文字のローマ字: I、II、III、IV、V、...
下位ギリシャ文字: α( など) のような大文字のローマ字alpha)、β(beta )、γ(gamma)、...
lower-latin: 小文字のラテン語、例: a、b、c、... z
upper-latin: 大文字のラテン語、例: A、 B、C、.. Z
アルメニア語: アルメニア数字
グルジア語: グルジア数字、例: an、ban、gan、...、he、tan、in、in-an、...
下位アルファ:小文字のラテン語、例: a、b、c、... z
upper-alpha: 大文字のラテン語、例: A、B、C、... Z
none: なし (すべてのリスト スタイルをキャンセル)
継承:継承
カスタム画像: list-style:square inside url

省略規則: list-style:square inside url('arrow.gif'); 手前の青い四角はリスト シンボル list-style-type です。中央の赤い部分は list-style-position locator、最後の緑色の URL は画像パス list-style-image です。この画像が存在しない場合は、前の四角形が上書きされます。四角で表示されます。

.cen5 li a{display:inline-block;width:480px;height:20px;line-height:20px;margin-top:3px}
.ileft{display:inline-block}

テキストの前に黒い点を書くか、

  • 連絡先
  • などの写真をアップロードできます
    背景画像にアップロードできます、

    以上がCSSはlist-style-type属性を使用してテキストの後ろに表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。