1

我希望使用 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是从哪里来的呢？

为了您的方便，这里有一个 jsfiddle，您可以为其分叉和编写 css。

4

6 回答 6

2

编辑 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>任何你想要换行的地方使用。

于 2013-05-25T09:18:29.083 回答
2

正如您已经提到的，您可以调整填充属性。您可能还需要设置他的列表样式位置。

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

小提琴

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

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

小提琴

于 2013-05-25T09:12:25.997 回答
1

如果您使用 Chrome 的开发人员工具查看，您可以看到用户代理样式表在 上设置了一个名为-webkit-padding-startto40px的属性ol，Firefox 也是如此。padding-left通过设置to覆盖此属性1.3em将在所有浏览器中为您排好队。1.3em似乎总是等于数字和文本之间的距离，而不管li值是基于 计算的。font-sizeemfont-size

ol {
    list-style-position: outside;
    padding-left: 1.3em;
}

这是一个jsFiddle

于 2013-05-25T09:55:44.220 回答
1

如果您不使用的唯一原因<pre>是您想要换行：

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

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

于 2013-05-25T09:08:14.800 回答
0

在不更改 CSS 的情况下，您可以使用 <br/> 标签实现这一壮举，如下所示：

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

要使用 CSS 实现它，您可以查看 <li> 和 <br/> 是如何设置的。

快速说明：当然，它也可以与 <ol> 一起使用。

于 2013-05-25T09:33:43.237 回答
0

使用 css 重置/规范化，设置自定义padding-left，并为移动设备使用元视口标签。

于 2013-05-25T11:25:57.390 回答