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

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 tej krawędzi elementu HTML, od której rozpoczęło się pisanie tekstu 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 tej krawędzi obszaru zawartości elementu HTML, od której rozpoczęło się pisanie tekstu 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>