Question

我有一个在<ul>内呈现的名字列表。我应用了一些CSS代码，但面临一些特定于浏览器的问题。

Chrome ：列表元素已被替换为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'>

Answer 1

问题确实是

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

这将每个元素定位为＆＃34; abs＆＃34; ul元素的左边20px（和顶部的0px）。

您想要达到什么目标？您的菜单是水平还是垂直？

水平：使用float：left或display：inline with margin-left：20px;

垂直：左边20px边距： http://jsbin.com/ediloh/17/edit

我首先添加了margin：0px来删除ul元素的顶部和底部边距。接下来，我添加了20px的左边距将其向右移动。

替代方案：将margin-left放在li元素上。这不会移动圈子

Answer 2

带有position:absolute的div从页面流中取出，基本上导致它们的父div根本没有内容（没有任何内容相当于任何宽度或高度）。所以他们会崩溃。

Answer 3

你真正想要什么结果。你正在修复div.abs在其包含的div.rel中缩进20px。

你能否想一下你想要达到的目标。

永

由于firefox和chrome中的CSS而错放了列表元素

3 个答案: