页面中标题和列表的垂直对齐

有如下代码

<h2>headline</h2>
<ul id="list">
  <li>list1
    <ul>
      <li>item1</li>
      <li>item2</li>
    </ul>
  </li>
  <li>list2
    <ul>
      <li>item1</li>
      <li>item2</li>
    </ul>
  </li>
</ul><!--/#list-->
 显示效果如下

 

现在要使最外层的ul的子元素li浮动，使之水平排列。添加如下的内部样式表

<style>
#list > li {
  float: left;
  list-style: none;
  margin: 10px;
}
</style>

显示效果如下

可以看到，标题和最外层的ul并不是垂直对齐的，如何调整呢？可以考虑以h2的左边界为标准，调整ul的样式设置。在样式表中添加如下样式：

#list {
  margin: 0;
  padding: 0;
}
#list > li:first-child {
  margin-left: 0;
}

显示效果如下

如果要以ul的左边界为标准，来调整h2的左边界，又该如何呢？

以下是内部样式表

<style>
#list > li {
  float: left;
  list-style: none;
  margin: 10px;
}
</style>

以下是脚本：

<script>
$(document).ready(function() {
    //获取最外层ul的margin-left和padding-left值，再加上在前面样式表中设置的li的margin-left
    var ml = parseInt($("#list").css("marginLeft")) + parseInt($("#list").css("paddingLeft")) + 10;
    $("h2").css("marginLeft", ml+"px");
});
</script>

显示效果如下

严格说起来，h2对准的是最外层ul的第一个子元素li。

上面示例中采用了jQuery，版本为1.1.3a。