home ~ projects ~ socials

Prevent li Elements From Shifting Right In A ul List

Example

HTML

<ul class="unshiftExample">
  <li>Greet the new guests and leave quickly.
Guess the results from the first scores</li>

  <li>Hang tinsel from both branches</li>

  <li>Heave the line over the port side
Help the weak to preserve their strength
Hoist it up and take it away</li>

  <li>Hold the hammer near the end to drive the nail</li>
</ul>

<p>Open your book to the first page
Pack the kits and don’t forget the salt
Paint the sockets in the wall dull green
Pick a card and slip it under the pack</p>

Output

  • Greet the new guests and leave quickly. Guess the results from the first scores
  • Hang tinsel from both branches
  • Heave the line over the port side Help the weak to preserve their strength Hoist it up and take it away
  • Hold the hammer near the end to drive the nail

Open your book to the first page Pack the kits and don’t forget the salt Paint the sockets in the wall dull green Pick a card and slip it under the pack

CSS

.unshiftExample {
  list-style: none;
  padding-left: 0;
}
-- end of line --

References