SSブログ

リストの行番号の表示位置を指定する。

CSS
リストの行番号の表示位置を指定するプロパティについてです。
リストの行番号の表示位置を指定する場合は、list-style-positionのプロパティを使います。


list-style-positionに指定する値は、outsideinsideです。

list-style-positionの値にoutsideを設定すると、行番号をリスト項目の外側に表示します。リスト番号以外が字下げしたように表示されます。(デフォルト値)

list-style-positionの値にinsideを設定すると、行番号をリスト項目の内側に表示します。

CSSの記述例は、次のようになります。
ul.liststylepositioninside{
list-style-position:inside;
}

htmlはこんな感じです。
<ul>
<li>デフォルトの表示位置は、outsideなので<br />行番号をリストの外側に表示します。</li>
</ul>
<ul class="liststylepositioninside">
<li>list-style-positionにinsideを指定したので<br />行番号がリストの内側に表示されます。</li>
</ul>


  • デフォルトの表示位置は、outsideなので
    行番号をリストの外側に表示します。

  • list-style-positionにinsideを指定したので
    行番号がリストの内側に表示されます。

    まとめ
  • リストの行番号の表示位置を指定する場合、list-style-positionのプロパティを使う。

  • list-style-imageの値には、outsideinsideを設定する

  • outsideを指定すると、行番号がリスト項目の内側に表示される(デフォルト値)

  • insideを指定すると、行番号がリスト項目の内側に表示される




nice!(0)  コメント(1)  トラックバック(0)  [編集]
共通テーマ:パソコン・インターネット

nice! 0

コメント 1

Cialis 5 mg funziona

沒有醫生的處方
cialis en mexico precio http://cialisvonline.com/ Cialis alternative
by Cialis 5 mg funziona (2018-04-15 06:49) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました
広告スペース
Copyright © HTMLの基本から勉強してみる All Rights Reserved.

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。