Ostatnio edytowany:

list-style-position

Autor: Virtual Patriot

Opis właściwości list-style-position

Za pomocą właściwości list-style-position możemy określić pozycję wyróżnika interesującej nas listy HTML.

Dodatkowe techniczne informacje o właściwości list-style-position

przeznaczenie

element HTML typu list-item

pozycja

dowolna

dziedziczenie

tak

wartość initial

outside

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości list-style-position

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości list-style-position

outside

Opis

Wartość outside jest domyślną wartością właściwości list-style-position.

Domyślnie wyróżnik listy HTML znajduje się na zewnątrz obszaru elementu HTML względem początkowej krawędzi liniowej elementu HTML.

Przykład

  list-style-position:outside;
  • pierwszy przedmiot listy HTML
  • drugi przedmiot listy HTML
  • trzeci przedmiot listy HTML
  • czwarty przedmiot listy HTML
  • piąty przedmiot listy HTML

Wyróżnik każdego przykładowego elementu "li" znajduje się na zewnątrz obszaru każdego przykładowego elementu "li".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      ul > li {
        margin-bottom:1px;
        padding:0.5em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <ul>
      <li>pierwszy przedmiot listy HTML</li>
      <li>drugi przedmiot listy HTML</li>
      <li>trzeci przedmiot listy HTML</li>
      <li>czwarty przedmiot listy HTML</li>
      <li>piąty przedmiot listy HTML</li>
    </ul>

  </body>
</html>

inside

Opis

Za pomocą wartości inside właściwości list-style-position możemy sprawić, że wyróżnik interesującej nas listy HTML znajdzie się wewnątrz obszaru zawartości elementu HTML względem początkowej krawędzi liniowej elementu HTML.

Przykład

  list-style-position:inside;
  • pierwszy przedmiot listy HTML
  • drugi przedmiot listy HTML
  • trzeci przedmiot listy HTML
  • czwarty przedmiot listy HTML
  • piąty przedmiot listy HTML

Wyróżnik każdego przykładowego elementu "li" znajduje się wewnątrz obszaru zawartości każdego przykładowego elementu "li", ponieważ do przykładowego elementu "ul" została dodana właściwość "list-style-position" wraz z wartością "inside".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      ul {
        list-style-position:inside;
      }

      ul > li {
        margin-bottom:1px;
        padding:0.5em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <ul>
      <li>pierwszy przedmiot listy HTML</li>
      <li>drugi przedmiot listy HTML</li>
      <li>trzeci przedmiot listy HTML</li>
      <li>czwarty przedmiot listy HTML</li>
      <li>piąty przedmiot listy HTML</li>
    </ul>

  </body>
</html>