Question

我正在尝试创建一个没有项目符号的<ul>（即list-style-type: none），其中项目有一个悬挂缩进（除了第一行之外的所有行都是缩进的）。我并不是说第一个之后的所有<li>都应缩进 - 而是如果<li>跨越多行，则第一行之后的所有行都应缩进<li>之内。我怎样才能做到这一点？

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

text-indent: 5px hanging：无效，hanging尚不支持
text-indent: -5px; padding-left: 5px：找到了这个技巧here，但它在这种情况下无效
this SO question处的解决方案，该功能对于无内容列表无效

注意：我知道我可以通过其他方式实现这一点（例如使用<p>而不是列表），但我想知道是否可以使用{{1} }。

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>

使用CSS挂在unbulleted列表上的缩进

2 个答案: