list-style-position



значения свойства:


  • outside
  • inside
  • inherit



css/style.css
  • #u1 {
  •  list-style-position: outside;
  • }
#u1 {
 list-style-position: outside;
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  •  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  • </head>
  • <body>
  •  <ul id="u1">
  •   <li>one<br />Hello World!</li>
  •   <li>two<br />To be or not to be?</li>
  •   <li>three<br />Привет Мир!</li>
  •  </ul>
  •  <ul id="u2">
  •   <li>one<br />Hello World!</li>
  •   <li>two<br />To be or not to be?</li>
  •   <li>three<br />Привет Мир!</li>
  •  </ul>
  •  <ul id="u3">
  •   <li>one<br />Hello World!</li>
  •   <li>two<br />To be or not to be?</li>
  •   <li>three<br />Привет Мир!</li>
  •  </ul>
  •  <script>
  •   /*JavaScript*/
  •   document.getElementById("u2").style.listStylePosition = "inside";
  •   /*jQuery*/
  •   $(document).ready(function () {
  •    $("#u3").css({ "list-style-position": "inside" });
  •   });
  •  </script>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  •  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  • </head>
  • <body>
  •  <ul id="u1">
  •   <li>one<br />Hello World!</li>
  •   <li>two<br />To be or not to be?</li>
  •   <li>three<br />Привет Мир!</li>
  •  </ul>
  •  <ul id="u2">
  •   <li>one<br />Hello World!</li>
  •   <li>two<br />To be or not to be?</li>
  •   <li>three<br />Привет Мир!</li>
  •  </ul>
  •  <ul id="u3">
  •   <li>one<br />Hello World!</li>
  •   <li>two<br />To be or not to be?</li>
  •   <li>three<br />Привет Мир!</li>
  •  </ul>
  •  <script>
  •   /*JavaScript*/
  •   document.getElementById("u2").style.listStylePosition = "inside";
  •   /*jQuery*/
  •   $(document).ready(function () {
  •    $("#u3").css({ "list-style-position": "inside" });
  •   });
  •  </script>
  • </body>
  • </html>