1

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

  • Chrome：列表元素被移动了 1 行。

  • Firefox：所有列表项折叠为一项。

代码片段（JS bin 编辑器）

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'>

4

3 回答 3

1

问题确实是

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

这会将每个具有类“abs”的元素定位在 ul 元素的左侧（距离顶部 0px）20px 处。

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

水平方向：使用 float:left 或 display:inline，margin-left:20px；

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

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

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

于 2013-05-21T10:07:20.190 回答
0

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

于 2013-05-21T10:05:41.433 回答
-1

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

您能否对您要达到的目标有所了解。

翅膀

于 2013-05-21T09:55:15.977 回答