为什么我的HTML列表在WebView中移出屏幕？
里昂
我正在ViewPager内的WebView片段中加载一些本地HTML文件。我一直在为编号列表的缩进而挠头，随着我增加字体的大小，列表向左移动甚至移至从屏幕开始。
此演示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>
法比安·梅布斯（Fabian Mebus）
这是HTMLol元素的默认行为。见小提琴。
W3C建议浏览器供应商显示ol元素（典型的默认显示属性）是：
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;
}
注意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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么我的 javascript 嵌入在我的 HTML 中以随机化列表不起作用？
- 2
为什么在我的Android WebView中无法放大缩放？
- 3
为什么我的Thymeleaf视图HTML文件在Spting应用程序中不显示对象列表？
- 4
为什么我的Android Webview这么慢
- 5
为什么我的Android Webview这么慢
- 6
为什么我的WebView不起作用？
- 7
为什么我的登录屏幕如此混乱？
- 8
为什么我的屏幕比例为空？
- 9
为什么这在我的屏幕上发生？
- 10
为什么我的屏幕上充满^ [[6〜？
- 11
为什么我的pygame屏幕是静态的？
- 12
为什么我的桌面屏幕变黑？
- 13
为什么我的登录屏幕如此混乱？
- 14
为什么我不能导入点子列表中的库？
- 15
为什么列表中的变量不符合我的期望？
- 16
为什么我的for循环跳过列表中的元素？
- 17
为什么我的windbg不在调试器列表中？
- 18
为什么在我的图表下拉列表中重复“下载CSV”？
- 19
为什么在C中实现列表时我的程序崩溃？
- 20
为什么我只在列表中得到新添加的值？
- 21
为什么我的链接列表中存在细分错误？
- 22
为什么我的列表中的对象数目不正确？
- 23
为什么我不能从列表中删除所需的元素
- 24
为什么我不能导入点子列表中的库？
- 25
为什么我的列表没有显示在Android Studio中？
- 26
为什么我的随机列表中的值总是相同？
- 27
Python：为什么我在列表输出中得到u'？
- 28
为什么我不能更改反向列表中的元素？
- 29
为什么我的引用在Python中是动态的？为什么从列表中删除对象？
我来说两句