1

我正在 webview 中创建一个有序列表，我想从列表中删除缩进，即让列表与第一段对齐。这是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

4

5 回答 5

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 ... :)

于 2012-08-19T10:51:11.013 回答
2

您可以使用以下方式归档这样的样式：

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
于 2012-08-19T10:21:49.453 回答
0

如果您仅分配零填充，则项目符号会离开屏幕。我发现以下内容非常适合我的 webview

ul,ol {padding-left: 20px;}
li {padding-left:2px;}
于 2014-09-29T20:46:05.990 回答
0

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

我只在我的 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-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，这有很大的不同。

于 2013-07-04T21:06:55.247 回答
-2

不是吗

 <ul><li></li></ul>

不是<ol>吗？

看起来你的body标签的样式可能有语法错误

:)

~ 丹

于 2012-08-19T10:20:55.650 回答