由于firefox和chrome中CSS的错位列表元素

我有一个在<ul>内部呈现的名称列表。我应用了一些CSS代码，但面对一些浏览器特定的问题。由于firefox和chrome中CSS的错位列表元素

铬：列表元素得到由1行移位。
Firefox：所有列表项都折叠为一个项目。

HTML

<div id='container'> 
<ul class='list'> 
    <li> <div class='rel'> 
      <div class='abs'> item 1 </div> 
    </div> </li> 

    ... More items similar to above one

的CSS

#container { 
    height: 100px; 
    overflow-y:scroll; 
    width: 200px 
} 

.list { 
    background-color: skyblue; 
} 

.rel { 
    position: relative; 
} 

div.abs { 
    position: absolute; 
    left: 20px; 
}

我想知道这种不当行为在这两个浏览器的原因。我写错了CSS？

更新：随着<div class='abs'>我有很多的代码，我在这里没有添加，也没有必要和ABS div的内容定位相对于其父即<div class='rel'>

来源

2013-05-21 sachinjain024

的问题确实是UI元素的

div.abs { 
position: absolute; 
left: 20px; 
}

此位置与阶级“ABS” 20像素到左边（和0像素从顶部）的每一个元素。

您想要实现什么？你的菜单是水平还是垂直？

水平：使用float：left或display：内联margin-left：20px;

垂直：用于20像素的保证金左： http://jsbin.com/ediloh/17/edit

予先加入余量：0像素删除ul元素的顶部和底部边缘。接下来，我添加了20px的左边距，以将其移到右侧。

替代方法：在li元素上放置margin-left。这不会移动圆圈

来源

2013-05-21 10:07:20 Pepe

谢谢@Pepe我知道你在Jsbin编辑器中使用margin的替代方法。我只是想知道定位的原因在这里不起作用的原因吗？ – sachinjain024

通过在您的li元素上使用position：absolute，您可以将它们带出正常的页面流。这意味着它们与其他任何东西都没有关系，只是它们的第一个具有位置属性的父对象。这里是位置相对的ul元素。这个关系可以通过使用top/bottom/right/left来给出一个值。您使用过的左侧：0px。如果没有给出top/bottom值，它将使用top：0px。因此，每个li元素作为与ul元素的关系：位于左侧：20px，top0px。李元素之间没有任何关系，因此不会互相推低。 – Pepe

非常感谢..我看到这里有一些混乱。我的ul元素不是'relative'，而是有一个相对定位的rel类div。如果相对位置被添加到ul，那么我认为你的推理是正确的，但在这里我的div是相对定位的。你能检查一下这个吗？ – sachinjain024

-1

什么结果你真的想。您正在修正div.abs在其包含的div.rel中缩进20像素。

您能否介绍一下您正在努力实现的目标。

永

来源

2013-05-21 09:55:15 wingyip

我认为这应该是一个评论，而不是回答这个问题。 – sachinjain024

我当时没有留下评论，因为我没有足够的积分 - 当时还没有完全弄清楚Stackoverflow是如何工作的。现在明白了。只是试图帮助 – wingyip

与position:absolute的div取出页面流，基本上使它们的父的div有根本没有内容（没有内容达任何宽度或高度是）。所以他们会崩溃。

来源

2013-05-21 10:05:41

如果说'position：absolute'的元素被取出页面，那么为什么列表元素不会在body的开始处呈现。我的理解是，如果他们的父母是相对定位的，那么他们将w.r.t移到其父母。 – sachinjain024

Checkout Point4在http://www.barelyfitz.com/screencast/html-training/css/positioning/ – sachinjain024

由于firefox和chrome中CSS的错位列表元素

回答

相关问题