0

我正在尝试将 css 列表样式类型的图像与父边框对齐。

不幸的是，即使在非常老的 IE 浏览器、Firefox 和 Opera 中它也能很好地工作，但在 WebKit 浏览器（Chrome/Safari）中确实很混乱。

任何想法是什么导致它，以及使用背景图像以外的任何解决方法？这不是 reset.css 的事情，尝试了一些不同的重置，但似乎没有任何解决办法。

图片

例子

JSFiddle

http://jsfiddle.net/zzUdk/

来源

HTML

<ul>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
</ul>

CSS

ul {
    margin: 2em;
    border-left: solid 3px #999;
}

ul li {
    position: relative;
    left: 0.6em;
    list-style-type: disc;
}

（顺便说一句，Opera 用户，你能从 JSFiddle 复制代码吗？因为我现在有好几个星期都不能了？:()

4

1 回答 1

2

如果您使用：

list-style-position: inside

您将把回合放在 li 元素内，但正好在它的开始处。然后你可以把它移动到你想要的地方，但我认为现在没问题。

http://jsfiddle.net/zzUdk/2/

PS：如果您将这种行为中继到浏览器，您可能会遇到问题。我建议您放置自己的列表图标，结果会更好且一致。

于 2013-02-23T20:34:09.610 回答