Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSを使用して箇条書きを含むボックス内にマーカーを設定します

箇条書きを含むボックス内にマーカーを設定するには、 list-style-positionを使用します。 内部に値を持つプロパティ。

内部 値は、テキストが2行目に入る場合、テキストがマーカーの下に折り返されることを意味します。また、リストの値がoutsideの場合、テキストが開始された場所にインデントされて表示されます。

例

<html>
   <head>
   </head>
   <body>
      <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:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

  1. CSSでボックスの最小高さを設定します

    最小の高さ プロパティは、ボックスの最小の高さを設定するために使用されます。 min-heightプロパティの値は、数値、長さ、またはパーセンテージにすることができます。 例 <html>    <head>    </head>    <body>       <p style = "width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;

  2. ::markerCSSSelectorを使用してリストの箇条書きの色を変更する

    構文 CSS::マーカーセレクターの構文は次のとおりです- Selector::marker {    attribute: /*value*/; } 例 次の例は、CSS::マーカーセレクターを示しています。 <!DOCTYPE html> <html>    <head>       <style>          ul {             list-