W HTML-u znaczniki list numerowanych i list nienumerowanych (tzw. „markery”) są domyślnie umieszczane poza kontenerem na listę.
Poniższy przykład ilustruje domyślne stylowanie markerów na listach.
<ul style="list-style-position: outside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor felis, non sagittis mi dignissim sed. Sed maximus tempus.</li>
<li>Mauris in efficitur lectus. Integer dictum feugiat elit, ac blandit nunc iaculis ac. Proin nec diam nec lacus volutpat tempor. Curabitur.</li>
<li>Sed eleifend viverra sem, vel consectetur ex sodales quis. Praesent feugiat hendrerit metus fringilla aliquet. Nam sagittis vel turpis ut.</li>
</ul>- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor felis, non sagittis mi dignissim sed. Sed maximus tempus.
- Mauris in efficitur lectus. Integer dictum feugiat elit, ac blandit nunc iaculis ac. Proin nec diam nec lacus volutpat tempor. Curabitur.
- Sed eleifend viverra sem, vel consectetur ex sodales quis. Praesent feugiat hendrerit metus fringilla aliquet. Nam sagittis vel turpis ut.
Aby markery na listach nie wychodziły poza kontener należy elementowi ol lub ul nadać, za pomocą styli CSS, atrybut list-style-position z wartością inside.
Poniższy przykład ilustruje markerów na listach z uwzględnieniem powyższej zmiany.
<ul style="list-style-position: inside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor felis, non sagittis mi dignissim sed. Sed maximus tempus.</li>
<li>Mauris in efficitur lectus. Integer dictum feugiat elit, ac blandit nunc iaculis ac. Proin nec diam nec lacus volutpat tempor. Curabitur.</li>
<li>Sed eleifend viverra sem, vel consectetur ex sodales quis. Praesent feugiat hendrerit metus fringilla aliquet. Nam sagittis vel turpis ut.</li>
</ul>- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor felis, non sagittis mi dignissim sed. Sed maximus tempus.
- Mauris in efficitur lectus. Integer dictum feugiat elit, ac blandit nunc iaculis ac. Proin nec diam nec lacus volutpat tempor. Curabitur.
- Sed eleifend viverra sem, vel consectetur ex sodales quis. Praesent feugiat hendrerit metus fringilla aliquet. Nam sagittis vel turpis ut.