我在这里读了几个小时的文章,找不到解决办法。
我想创建一个有序列表,其中包含以下要求:
需要与内部位置的效果,所以没有大的利润从子弹到文本。
第二行必须缩进以便与文本对齐。。
必须以相同的方式在所有浏览器上工作,从IE7和更高版本。
A.该解决方案仅适用于chrome(在FF和IE中存在偏差,css重置没有帮助):

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

最佳答案

也许晚了一点,但有个解决办法:
CSS:


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

    ol {
      padding-left: 30px;
    }

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

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

and 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

关于html - 跨浏览器缩进到有内部位置的有序列表中的第二行-不可能吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20761774/

10-09 15:13