Question

我一直在这里阅读线程几个小时，但找不到解决方案。

我想创建一个有序列表，其中包含以下要求：

需要处于内部位置效应，因此从子弹到文本没有大的余量。
第二行必须缩进，以便与文本对齐..
必须在IE7及以上版本的所有浏览器上以相同的方式工作。

一个。这个解决方案只适用于chrome（在FF和IE中存在偏差，css reset没有帮助）：

<ol type="1" style="list-style-position:inside; margin:0px; padding-left:15px;">
        <li>Text</li>
        <li>Text</li>
        <li  style="margin: 0px; padding: 0px;
    text-indent: -1em; margin-left: 1em;">longer Text, longer Text, longer Text, longer Text<br>
second line of longer Text</li>
</ol>

B中。这个解决方案在IE7上不起作用，子弹消失了（虽然没有偏差）：

http://jsfiddle.net/4rnNK/1/

由于

Answer 1

也许迟到一点，但这是一个解决方案：

CSS：


    ol,li {
      margin: 0;
      padding: 0;
    }

    ol {
      padding-left: 30px;
    }

    li {
      margin: 0 0 15px -5px;
    }

    li span {
      position: relative;
      left: -10px;
    }

和HTML：

<p>
  Lorem ipsum dolor sit amet fugit error quae unde omnis aut aut, eos ut ratione omnis laudantium ab sit architecto nemo perspiciatis quasi doloremque voluptatem sunt ipsam ratione aperiam aperiam, aperiam error beatae voluptas aut doloremque eaque sit ut inventore ut omnis omnis, 
</p>

<ol>
  <li>
    <span>
      omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </span>
  </li>
  <li>
    <span>
      omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </span>
  </li>
</ol>

这是一个显示结果的小提琴：jsfiddle

Answer 2

（这是基于AbelRaj的评论，但更清晰。）使用css counter滚动自己并将其包装在li :: before之前。

http://jsfiddle.net/4rnNK/1463/

在内部位置的有序列表中跨越第二行的浏览器缩进 - 不可能？

2 个答案: