从 web 视图中的有序列表中删除缩进答案

【问题标题】：Remove indentation from an ordered list within a webview从 web 视图中的有序列表中删除缩进
【发布时间】：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 绝对可以用
包裹！

标签只是的另一个名称，带有一点样式。无论如何，我得到了它的工作......看下面我的答案。
是的，我解决了...请参阅下面的更新答案。

标签： iphone html ios ipad webview

【解决方案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。保存到桌面上的文件。将
奇怪。代码实际上就是我给你的，所以我在任何地方都没有一个流浪的“边际”。稍后我会在模拟器中尝试一下，看看是否有区别。
在您的原始帖子中，您说您在某处添加了“margin-left：-17px”。如果它仍然在那里或者你把它放在哪里，那么这就是导致它离开页面左侧的原因......你在你的 html 中丢失了一些东西。
还可以在你的 body 标签的样式中看到另一个错字。您发布了： style="font-family: arial""font-size:18" （不是 arial 和 font 之间的双引号。这可能应该是 style="font-family: arial";font-size:18"跨度>

【解决方案3】：

也许我对您的需求有点晚了——我刚遇到这个。

我只在我的 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 = 有序列表，编号。