html - 如何将图像与顶部的列表水平对齐？

Question

第一个 div 中的图像应该与从顶部数第二个 div 中的列表水平对齐。但是正如您所看到的，该列表与顶部存在差距。请指导如何消除这个差距？

fiddle :https://jsfiddle.net/sryzdn/svg0716k/

HTML:

<div id="container">
  <div id="div1"><img src="http://placehold.it/200x100"></div>
  <div id="div2">
    <ul>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
    </ul>
  </div>
</div>

CSS:

#container {
  width: 400px;
  height: 400px;
  background-color: red;
}

#div1 {
  width: 200px;
  height: 200px;
  background-color: green;
  float: left;
  position: relative;
}

#div1 img {
  position: absolute;
  top: 0;
}

#div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  float: left;
  positive: relative;
}

#div2 ul {
  position: absolute;
  top: 0;
}

#div2 li {
  display: inline-block;
  border: 1px solid black;
}

Answer 1

去掉top:0属性，在#div2 ul中添加margin-top: 0px;

#div2 ul {
  position:absolute;
  margin-top:0px;
}