垂直对齐列表项文本

Question

Is there a simple way to make the list items that take up two lines to align vertically with the text above? Thanks

* Cats            
* Turtles
* Frogs
* Horses and 
Zebras           
* Dogs
* Tigers and
Leopards

I want it to look like this

* Cats            
* Turtles
* Frogs
* Horses and 
  Zebras           
* Dogs
* Tigers and
  Leopards

Answer 1

Using basic HTML list tags ( <ul> and <li> ) with a max-width CSS setting will let you do that. See this example:

 li { max-width: 75px; } 

 <ul> <li>Cats</li> <li>Turtles</li> <li>Frogs</li> <li>Horses and Zebras</li> <li>Dogs</li> <li>Tigers and Leopards</li> </ul> 

Answer 2

The correct way to do this is to use the list-style-position property. I limited the width of the list to show the behaviour if there is overflow by adding the <div class="surround"> , but it is for effect only. Read more on lists here: https://www.w3schools.com/css/css_list.asp

 ul { list-style-position:outside; } .surround { width:150px; } 

 <div class="surround"> <ul> <li>Cats</li> <li>Turtles</li> <li>Frogs</li> <li>Horses and Zebras</li> <li>Dogs</li> <li>Tigers and Leopards</li> </ul> </div>