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

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 元素的填充，但是要点会从容器中伸出来。虽然，我可以 fiddle 使用填充，直到它们匹配选项 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>

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

Get list bullets to border of container while keeping line indents?

html

css

layout

margin

html-lists