Question

我在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，我可以让它与黑客一起工作但不愿意，因为我似乎更喜欢构建我的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

Answer 1

您可以使用以下内容存档样式：

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

Answer 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是否可以全面运作。

修改

我还应该提到它可能只出现在小屏幕上，因为它设置为40px。在我的设计中，我的全屏基本字体大小是23像素，而480像素及以下是10像素，这是相当不同的。

Answer 4

如果你只是指定一个零填充，则子弹离开屏幕。我发现以下内容适用于我的webview

ul,ol {padding-left: 20px;}
li {padding-left:2px;}

Answer 5

不是吗

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

不是<ol>？

看起来您的身体标签样式可能会出现语法错误

:)

〜丹

从webview中的有序列表中删除缩进

5 个答案: