[android]为什么做我 HTML 列表中的移动在屏幕外 WebView 吗?

标签: Android HTML webView
发布时间: 2017/3/12 0:07:27
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我加载一些本地 HTML 中的文件 WebView fragment里面 ViewPager 。我会增加字体列表中向左移动,甚至移动,因此它开始屏幕的大小,我已经在抓头关于编号列表中的缩进。

Smallest font size

Next size

enter image description here

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>

解决方法 1:

这是默认行为的 HTML ol element 。看到的副手

W3C 推荐标准为 browser 供应商要显示 ol典型的默认显示属性) 的元素是︰

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),它不是相对于或随字体大小的变化,没有定义的填充。它将永远40px

因此一个解决方案就是设置左填充ol element (em) 的比例单位︰

ol {
    padding-left: 1.5em;
}

这里是小提琴


这里有三种不同的方法来设置边距

1.内联样式

使用 style 属性︰

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

2. styleelement

<!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 文档。如果你有一个右到左方向则应设置填充权利而不是左填充。使用 <html dir=ltr><html dir=rtl> ,分别,你可以跟这去︰

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

[dir=rtl] ol {
    padding-right: 1.5em;
}
官方微信
官方QQ群
31647020