在保持行缩进的同时获取列表项目符号到容器的边界？

Question

在我的网站中，我的内容中有一个列表。我不喜欢 HTML 列表的标准缩进，但是到目前为止我只能找到两种处理缩进的方法。

选项 1： 这将使列表项目符号到达包含元素的边界。但是，较长列表项的行缩进与较长条目不匹配。

.wrapper {
  padding: 10%;
  background: black;
}

.container {
  background: lightblue;
  padding: 0;
  margin: 10%;
}

ul {
  padding: 0;
  list-style-position: inside;
}

 
 <div class="wrapper">
   <div class="container">
     <ul>
        <li>item 1</li>
        <li>
          item with very very very very very very very very very very very very very 
          very very very very very very very very very very very very very very very 
          long text.
        </li>
        <li>item 3</li>
    </ul>
  </div>
</div>

选项 2： 这实际上是标准的 HTML 布局。我的行缩进很好而且很整洁，但是我的项目符号点不在容器的边界。我现在可以删除 ul 元素的填充，但是项目符号点会伸出容器。虽然，我可以摆弄填充，直到它们匹配选项 1，如果我稍后更改字体大小或进行其他更改怎么办？

.wrapper {
  padding: 10%;
  background: black;
}

.container {
  background: lightblue;
  padding: 0;
  margin: 10%;
}

ul {
  list-style-position: outside;
}

<div class="wrapper">
   <div class="container">
     <ul>
        <li>item 1</li>
        <li>
          item with very very very very very very very very very very very very very 
          very very very very very very very very very very very very very very very 
          long text.
        </li>
        <li>item 3</li>
    </ul>
  </div>
</div>

问题：有没有办法将选项1中的项目符号的位置与选项2的行缩进结合起来？

Answer 1

您可以通过在列表中添加一些左边距来实现这一点，在这里我使用em 单位作为左边距，以便边距与列表的font-size 正确缩放：

.wrapper {
  padding: 10px;
}

.container {
  background: lightblue;
  padding: 0;
  margin: 10px;
}

ul {
  padding: 0;
  margin-left: 1em;
  font-size: 20px;
}

<div class="wrapper">
   <div class="container">
     <ul>
        <li>item 1</li>
        <li>
          item with very very very very very very very very very very very very very 
          very very very very very very very very very very very very very very very 
          long text.
        </li>
        <li>item 3</li>
    </ul>
  </div>
</div>