使用CSS将缩进挂在未占卜列表上

Question

我正在尝试创建一个没有子弹的<ul> (即list-style-type: none)，其中项目有一个挂起缩进(除了第一行外，所有行都是缩进的)。我并不是说第一个之后的所有<li>都应该缩进--相反，如果一个<li>跨越多行，那么第一行之后的所有行都应该缩进该<li>中。我怎样才能做到这一点？

到目前为止，我已经尝试过：

• text-indent: 5px hanging：没有效果，还不支持hanging
• text-indent: -5px; padding-left: 5px：找到了这个技巧这里，但是它在这个上下文中不起作用
• 这个问题的解决方案，它不适用于未包含项目的列表

注意到：我知道我可以通过其他方法(例如使用<p>s而不是列表)来实现这一点，但我想知道是否可以使用<ul>。

Answer 1

您可以添加一些填充和负text-indent。

​

ul {
  list-style: none;
  padding-left: 40px; /* Most browsers already have this by default */
}
li {
  text-indent: -20px;
}

<ul>
  <li>Hello<br />world<br />foo bar</li>
</ul>

​

Answer 2

这就是你想要达到的目标吗？

​

ul {
  list-style: none;
  margin: 0;
  padding-left: 20px
}
li {
  text-indent:-15px;

}

<ul>
  <li>test
    <br/>me</li>
</ul>

​