Question

是否有任何跨浏览器css解决方案来格式化下面的列表具有以下品质？

<p>a demo</p>
<ol>
    <li>the quick brown fox jumps over the lazy dog</li>
    <li>the quick brown fox jumps over the lazy dog</li>
    <li>the quick brown fox jumps over <br/>the lazy dog</li>
</ol>

列出以字母a开头的项目。湾C。等
子弹字母彼此对齐，以及上面的段落。
子弹字母和项目文本之间有几个字符空格。
同一列表项中的文本行左对齐。

编辑：在触发快乐之前，谁认为这很容易将其关闭，这是我最接近的：

ol { list-style: lower-alpha; padding-left: 0; }
li { margin-left: 1em; padding-left: 1em; }

https://jsfiddle.net/htopjbu3/

在Firefox中满足1 3和4但不满足Chrome。对于2我找不到任何方法让子弹字母左边相互对齐，而不是在使用list-style-position: inside（除了3和4）之外的右边对齐。

Answer 1

对于第1点：

<p>a demo</p>
<ol type="a">
    <li>the quick brown fox jumps over the lazy dog</li>
    <li>the quick brown fox jumps over the lazy dog</li>
    <li>the quick brown fox jumps over <br/>the lazy dog</li>
</ol>

Answer 2

只需添加<span>代码

即可

＆＃13;

   ol {list-style-type: lower-alpha;}
span {margin-left:10px;}

＆＃13;

    <ol>
      <li><span>Coffee</span></li>
      <li><span>Tea</span></li>
      <li><span>Coca Cola</span></li>
    </ol>

＆＃13;

Answer 3

1.2em在Chrome和Firefox中适用于我（并且您可以始终以像素为单位指定），所有4条规则都是正确的：https://jsfiddle.net/htopjbu3/1/

＆＃13;

ol { list-style: lower-alpha; padding-left: 0; }
li { margin-left: 1.2em; padding-left: 1em; }

＆＃13;

<p>a demo</p>
<ol>
    <li>the quick brown fox jumps over the lazy dog</li>
    <li>the quick brown fox jumps over the lazy dog</li>
    <li>the quick brown fox jumps over <br/>the lazy dog</li>
</ol>

＆＃13;

但是，如果＃2你希望字母和点垂直对齐，我担心你不得不使用等宽字体，因为没有其他方法可以对齐，比方说，m.和i.

请记住，您定义的CSS规则越多，将应用的浏览器默认规则就越少，这对于跨浏览器问题（以及那些重置CSS文件正在执行的操作）有很大帮助。而且它的坏处。）

无序列表的对齐和间距

3 个答案: