Question

http://krill.larvit.se/resihop_dev/，右列有序列表。

HTML：

<ol class="instructions">
  <li>
    <p>För att hitta samåkningar, klicka på kartan på platsen du vill åka ifrån.</p>
  </li>
</ol>

我相信相关的CSS：

.instructions{
    padding-left: 0;
}
.instructions li{
    padding: 0 10px;
    margin: 0 0 10px 0;
    list-style-position: inside;
    font-size: 25px;
}

.instructions li p{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
}

在Internet Explorer 9中，在“1”的右侧添加了一个大空间。我该怎么办？如果可能的话，我想保留html标记。

Answer 1

我会从<p>标记内删除<li>标记作为您不需要它的列表条目，（您所做的是在列表条目中添加一个段落< / em>）然后，您只需设置<ol>代码和<li>代码

的样式

Answer 2

不同的浏览器呈现的略有不同，但我个人会做以下事情：

.instructions li{
    padding: 0;
    margin: 0 0 10px 30px;
    font-size: 25px;
}

这将在所有浏览器中显示相当接近，如果您希望它更接近，您需要使字体大小为1.较小的或将-XXpx的左边距添加到段落< / p>

.instructions li p{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 360px;
    margin-left:-8px;
}

另一种选择是将数字作为CSS精灵+背景图像放在li上。

list-item上具有list-style-position的意外间距：Internet Explorer中的内部

2 个答案: