从 web 视图中的有序列表中删除缩进
Posted
技术标签:
【中文标题】从 web 视图中的有序列表中删除缩进【英文标题】：Remove indentation from an ordered list within a webview 【发布时间】：2012-08-19 10:16:05 【问题描述】：我正在 web 视图中创建一个有序列表，我想从列表中删除缩进，即让列表与第一段对齐。这是 html：
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
请注意，使用margin-left:0px，webview 仍会将列表缩进大约 17 个点。如果我说margin-left:-17px，我可以通过 hack 让它工作，但我宁愿不这样做，因为这看起来更像是我在构建 HTML 时做错了什么。
谁能看出它有什么问题？
更新的 HTML - 仍然不起作用：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
font-family: arial;
font-size: 18px;
ol
padding-left: 0px;
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
我在 iPhone 3GS 上使用 ios 5.1
【问题讨论】：
a<ol> 永远不能被包裹在 <p> 中
ol MOST 绝对可以用 包裹！
标签只是 的另一个名称，带有一点样式。无论如何，我得到了它的工作......看下面我的答案。
是的，我解决了...请参阅下面的更新答案。 【参考方案1】：你可以用这样的方式归档风格：
ol
list-style-type: none;
margin: 0;
padding: 0;
【讨论】：
与上述相同的问题“当我这样做时，我需要给填充一个值，以便列表不会从屏幕的左侧移出。仍然感觉有点hacky。你在 iOS 上执行此操作？”【参考方案2】：试试这个....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
font-family: arial;
font-size: 18px;
.flush-left
padding-left: 25px;
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
其他几个指针。在桌面上的 html 测试文件中测试你的东西，然后将它们加载到 Safari 和 iOS 模拟器中（将 html 文件拖到模拟器中打开的 safari 上）。
但是您可以使用常规 Safari 调试工具来检查 html 和 css。或 Firefox 中的 Firebug。
此外，如果有疑问 www.w3schools.com ... :)
【讨论】：
谢谢。当我这样做时，我需要给填充一个值，以便列表不会从屏幕的左侧移开。还是觉得有点hacky。你是在 iOS 上做的吗？ 是的，我是在 iOS 中完成的。我在上面复制你的 HTML。保存到桌面上的文件。将- 标签上的样式更改为我在上面写的内容，然后在 iPhone 5.1 Simulator 中打开，我得到的正是你所要求的。删除了填充的列表，并用 para 向左对齐。这不是hacky，这是标准的css。如果您从左侧移开，那是因为您仍然有您提到您在页面某处尝试过的负边距。另外，我建议您在 head 部分中使用样式。
也许我对您的需求有点晚了——我刚遇到这个。
我只在我的 iPhone 上注意到了这一点，而不是我的 iPad，也不是 Mac 上的 Safari。我发现有点奇怪，这个问题只会出现在 Safari 的一个版本中，而不是全部。我也没有在 Chrome 中发生。
在查看 Chrome 开发者工具时，我注意到用户代理样式表添加了许多 -webkit 前缀样式，都与边距和填充有关：
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
当我第一次看到时，我想知道这是否是问题所在，但是，已经很晚了，我不得不休息一下。今天，我再次处理它，但忘记了这些样式。我环顾四周，遇到了@Remover 的问题。但是，设置特定的基于像素的边距或内边距并不适合我。
在某个时候，我决定在 Chrome 中缩小我的浏览器窗口，发现问题也存在，只是当我将其缩小到接近 iPhone 的宽度时。因此，这不仅仅是 iOS 问题。它是 webkit。
我再次查看了开发工具中的样式，再次看到了 -webkit 样式和 -webkit-padding-start 上的 40px。我玩弄我的css，这确实是罪魁祸首。
然后我将以下内容添加到我的样式表中：
ol
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
我做了一些快速研究，看起来只有 -webkit 和 -moz 使用了 padding-start，但我添加了其余部分，以防万一他们接受它——不过，现在 Opera 已经切换到 webkit，—— o 可能不需要。
在我的例子中，我使用了 2em，因为它符合我的风格。不确定 2em 是否会全面发挥作用。
编辑
我还应该提到它可能只显示在小屏幕上，因为它设置为 40 像素。在我的设计中，我全屏的基本字体大小是 23px，480px 及以下是 10px，差别很大。
【讨论】：
【参考方案4】：如果您仅指定零填充，则项目符号会离开屏幕。我发现以下内容非常适合我的 webview
ul,ol padding-left: 20px;
li padding-left:2px;
【讨论】：
【参考方案5】：不是吗
<ul><li></li></ul>
不是<ol>？
看起来你的body标签的样式可能有语法错误
:)
~丹
【讨论】：
ul = 无序列表，项目符号。 ol = 有序列表，编号。以上是关于从 web 视图中的有序列表中删除缩进的主要内容，如果未能解决你的问题，请参考以下文章