Question

我正在ViewPager中的WebView片段中加载一些本地HTML文件。我一直在摸索编号列表的缩进，因为我增加了列表向左移动的字体大小，甚至移动以便从屏幕开始。

Smallest font size

Next size

enter image description here

此演示HTML没有与之关联的CSS：

<html>
<head>
        <meta name="viewport" content="user-scalable=no, width=device-width">
</head>
<body>
        <p>This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. This is a simple paragraph. </p>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
             </ol>
</body>
</html>

Answer 1

这是HTML ol元素的默认行为。请参阅fiddle。

W3C建议浏览器供应商显示ol个元素（Typical default display properties）：

ol {
  display: block;
  list-style-type: decimal;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px; 
}

padding-start: 40px;是这里有趣的部分。由于填充未在比例单位（px）中定义，因此它与 font-size 的更改无关或不在其中。它总是 40px 。

因此，一种解决方案是将ol元素的 padding-left 设置为比例单位（em）：

ol {
    padding-left: 1.5em;
}

这是fiddle。

以下是设置填充的三种不同方法：

<强> 1。内联样式

使用style属性：

<ol style="padding-left: 1.5em;">
  <li>Item 1</li>
  <li>Item 1</li>
  <!-- ... -->
</ol>

<强> 2。 style元素

<!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8 />
    <title>your title</title>
    <style>
      ol {
        padding-left: 1.5em;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Item 1</li>
      <li>Item 1</li>
      <!-- ... -->
    </ol>
  </body>
</html>

第3。外部样式表

这种方法是我的建议，因为你在标记和样式之间有明确的分离。将外部CSS文件链接到HTML文档。

HTML文档：

<!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8 />
    <title>your title</title>
    <link rel=stylesheet href="path/to/your/css/style.css"/>
  </head>
  <body>
    <ol>
      <li>Item 1</li>
      <li>Item 1</li>
      <!-- ... -->
    </ol>
  </body>
</html>

CSS文件style.css：

ol {
    padding-left: 1.5em;
}

请注意HTML文档中的文本方向。如果你有一个从右到左的方向，你应该设置 padding-right 而不是 padding-left 。分别使用<html dir=ltr>或<html dir=rtl>，您可以使用：

[dir=ltr] ol {
    padding-left: 1.5em;
}

[dir=rtl] ol {
    padding-right: 1.5em;
}

为什么我的HTML列表会在WebView中移出屏幕？

1 个答案: