Question

我正在尝试使用html和css完美左对齐项目符号，但是当字体大小发生变化时，左对齐也会发生变化。

list-style-position应为outside。我尝试使用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;
}

Redshift UDF's intro

Answer 1

您也可以使用伪元素并使用像素代替em：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 2

您可以通过删除子弹并在内容之前使用点作为技术来实现它。请参阅代码：

＆＃13;

ul
{
    list-style-type: disc;
    list-style-position: outside;
    padding: 0.5em 0 0 50px;
}

ul.two li
{
    font-size: 60px;
}

ul.three li
{
    font-size: 35px;
}

ul li{
        list-style: none;
        margin-left: 9px;
        text-indent: -9px;
}

ul li:before {
    content: "· ";
}

＆＃13;

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

＆＃13;

我希望它能带你走向某个方向。

用css左对齐子弹点

2 个答案: