在我的网站我有一个列表在我的内容。 我不喜欢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>

null

选项1:这实际上是标准的html布局。 我的线条缩进很好，很整齐，但是我的圆点不在容器的边界。 我现在可以移除ul元素的填充，但是项目符号将从容器中伸出。 虽然，我可以摆弄填充物，直到它们匹配选项1，如果我以后更改字体大小或做其他更改怎么办？

null

.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>

null

问题:有没有办法将选项1中项目点的定位与选项2的线条缩进结合起来？