CSS-リストスタイルの位置

説明

list-style-positionプロパティは、リストアイテムのコンテンツに対するマーカーの配置に影響します。

可能な値

Sr.No.

Value & Description

1

none

NA

2

inside

テキストが2行目にある場合、テキストはマーカーの下に折り返されます。また、リストの値がoutsideの場合、テキストの開始位置にインデントされて表示されます。

3

outside

テキストが2行目にある場合、テキストは最初の行の先頭（箇条書きの右側）に揃えられます。

に適用されます

list-itemが表示されているすべての要素。

DOM構文

object.style.listStylePosition = "inside";

例

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>

      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>

</html>

これにより、次の結果が生成されます–

Css-list-style-position

目次

CSS-リストスタイルの位置

説明

可能な値

に適用されます

DOM構文

例