Why does my HTML list move off the screen in a WebView?

Question

I'm loading some local HTML files in WebView fragments inside a ViewPager. I've been scratching my head about the indentation of the numbered list, as I increase the size of the font the list moves to the left and even moves so that it starts off the screen.

最小字体

下一个尺寸

在此处输入图片说明

This demo HTML has NO CSS associated with it:

<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

This is the default behavior of an HTML ol element. See the fiddle .

The W3C recommendation for browser vendors to display ol elements ( Typical default display properties ) is:

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

The padding-start: 40px; is the interesting part here. Because the padding is not defined in a proportional unit (px) it is not relative to or follows the change of the font-size . It will always be 40px .

So one solution would be to set the padding-left of the ol element to a proportional unit (em):

ol {
    padding-left: 1.5em;
}

Here is the fiddle .

Here are three different approaches to set the padding :

1. Inline style

Use the style attribute:

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

2. The style element

<!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. External style sheet

This approach is my recommendation, because you have a clear separation between markup and styles. Link an external CSS file to your HTML document.

HTML document:

<!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 file style.css:

ol {
    padding-left: 1.5em;
}

Be aware of the direction of text in your HTML document. If you have a right-to-left direction you should set the padding-right and not the padding-left . Using <html dir=ltr> or <html dir=rtl> , respectively, you can go with this:

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

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

Why does my HTML list move off the screen in a WebView?

Question

1 answers

solution1
4 ACCPTED 2014-07-07 14:39:18

Why does my HTML list move off the screen in a WebView?

Question

1 answers

solution1 4 ACCPTED 2014-07-07 14:39:18

solution1
4 ACCPTED 2014-07-07 14:39:18