Question

我希望使用HTML / CSS显示这一点：

This is a paragraph.
1. This is a list item.
   Continuation of list item: using list-style-position:outside.
This is another paragraph.

我遇到的问题是我的1.没有排到Th（来自上一行的This）。这是因为padding-left中存在固有ol，对吧？如何在所有浏览器/设备上一致地摆脱这种情况？一个神奇的ol { padding-left: 22px }似乎有效（在我的桌面浏览器上，但它在我的移动浏览器上被破坏了），但是这个神奇的22px来自哪里？

为了您的方便，here's a jsfiddle您可以分叉并编写css for。

Answer 1

编辑2：这是使用counter而不是默认编号的示例。原因是，一旦你超过9，上一个例子中的数字开始向左突破： http://cdpn.io/izrAh

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

p, ol {margin: 0; padding: 0;}
    ol {list-style: none;}
li {
    padding-left: 30px; 
    counter-increment: nums; 
    position: relative;
}

li:before {
    content: counter(nums);
    position: absolute;
    left: 0px;
}

</style>

</head>
<body>

<p>This is a paragraph of text.</p>
<ol>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
    <li>This is a list item<br>
        Continuation of list item.
    </li>
</ol>
<p>This is a paragraph of text.</p>

</body>
</html>

EDIT1：使用list-style: outside（默认设置）更容易：http://codepen.io/pageaffairs/pen/tiALm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

p, ol {margin: 0; padding: 0;}
ol {width: 150px}
li {margin-left: 18px;}

</style>

</head>
<body>

<p>This is a paragraph of text.</p>
<ol>
    <li>This is a list item
        Continuation of list item.
    </li>
</ol>
<p>This is a paragraph of text.</p>

</body>
</html>

首先尝试：这样的事情：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

p, ol {margin: 0; padding: 0;}
ol {list-style: inside; width: 150px}
li {text-indent: -16px; padding-left: 18px;}

</style>

</head>
<body>

<p>This is a paragraph of text.</p>
<ol>
    <li>This is a list item
        Continuation of list item.
    </li>
</ol>
<p>This is a paragraph of text.</p>

</body>
</html>

注意：我只是在<ol>上设置了一个小宽度来演示换行。另一种方法是在任何想要换行的地方使用<br>。

Answer 2

正如您已经提到的，您可以调整填充属性。您可能还需要设置list-style-position。

ol { list-style-position:inside; padding:0; }

Fiddle

如果由于某种原因，您必须使用list-style-position:outside，那么只需将左侧填充增加到大约20px（数字和文本之间的距离）即可获得类似的结果。

ol { list-style-position:outside; padding-left:20px; }

Fiddle

Answer 3

如果你没有使用<pre>的唯一原因是你想要换行：

p {
    font-family: monospace;
    white-space: pre-wrap;
}

http://jsfiddle.net/T59Ha/3/

Answer 4

如果你看一下使用Chrome的开发者工具，你可以看到用户代理样式表在-webkit-padding-start上设置了一个名为40px到ol的属性，同样是适用于Firefox。通过将padding-left设置为1.3em来覆盖此属性，系统会在所有浏览器中为您排序。 1.3em似乎始终等于li的数字和文本之间的距离，而不考虑font-size，因为em值是根据{{1}计算的}}

font-size

这是 jsFiddle

Answer 5

在不更改CSS的情况下，您可以使用＆lt; br /＆gt;来实现这一壮举。标记如下：

<p>Previous paragraph</p>
<ul>
  <li>Test here<br/>
      And there</li>
</ul>
<p>Next paragraph</p>

要使用CSS实现它，您可以查看＆lt; li＆gt;和＆lt; br /＆gt;正在设置。

快速说明：它适用于＆lt; ol＆gt;当然也是。

Answer 6

使用css reset / normalize，设置自定义padding-left，并为移动设备使用元视口标记。

Answer 7

您可以尝试：

ol { list-style-type: none; 
  margin: 0; 
  padding: 0;
}

对于元素，只需使用自动换行：normal;在造型

如何将<ol>中的列表项与我的<p>对齐？</p> </ol>

7 个答案: