html - 使用 css 左对齐元素符号点

Question

我试图用 html 和 css 完美地左对齐元素符号点，但是当字体大小改变时，左对齐也会改变。

list-style-position 应该在外面。我尝试使用 inside，然后使用 text-indent 进行补偿，但看起来更糟。

这是迄今为止我得到的最好的，但它看起来仍然不太好，如果我只是在 ul 元素上应用样式，它对我的​​代码结构来说会更优化。

ul
{
  list-style-type: disc;
  list-style-position: outside;
  padding: 0.5em 0 0 3em;
}

ul.two li
{
  font-size: 20px;
}

ul.three li
{
  font-size: 35px;
}

http://jsfiddle.net/d9VNk/776/

Answer 1

你也可以使用伪元素并使用像素代替 em:

ul {
  padding: 0.5em 0 0 20px;
  margin: 0 2em;
  background:linear-gradient(to right, transparent 20px, lightgray 20px);
}
li {
  list-style-type: none;
  padding-left: 20px;
}
li:before {
  content: '';
  float: left;
  display: list-item;
  list-style-type: disc;
  list-style-position: inside;
  width: 20px;
  margin-left: -20px;
}
ul.two li {
  font-size: 20px;
}
ul.three li {
  font-size: 35px;
}
ul.hudge li {
  font-size: 60px;
}

<ul>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

<ul class="two">
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

<ul class="three">
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul><ul class="hudge">
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>
</ul>

http://jsfiddle.net/d9VNk/778/