Question

是否有一种简单的方法可以使列表项占据两行，与上面的文本垂直对齐？谢谢

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

我希望它看起来像这样

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

Answer 1

使用带有<ul> CSS设置的基本HTML列表标记（<li>和max-width）可以让您这样做。见这个例子：

＆＃13;

li {
  max-width: 75px;
}

＆＃13;

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

＆＃13;

Answer 2

执行此操作的正确方法是使用list-style-position属性。我通过添加<div class="surround">来限制列表的宽度以显示存在溢出的行为，但它仅用于效果。在此处阅读更多关于列表的信息：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>

垂直对齐列表项文本

2 个答案: