如何正确地垂直和水平定位块元素？

Question

我想要完成的是左下角有h1，右下角有ul。

我为它做了一个jsfiddle还不是很正确。

最简单的方法似乎是在两个元素上使用position:absolute;，也许我最终还是会这样做。但是，我认为你不应该绝对定位任何东西，除非没有更好的选择。

使用float:left;和float:right;似乎有一个明显的选择，但在这种情况下，ul会过高。也许我可以通过添加margin-top来“推低它”，但我必须弄清楚在这种情况下究竟有多少。看起来并不优雅。

第三种选择可能是使用display:inline-block，但这甚至不能使水平对齐。

选项四似乎在修补position:relative，但在这种情况下，我还需要弄清楚需要调整多少位置。

我必须忽视一些明显的东西，但这里有比绝对定位更好的选择吗？

Answer 1

这是一个可能适合您的解决方案：

<强> Working Fiddle

在此演示中，我使用了float:left和float:right解决方案。主要是因为你已经用填充推送了h1元素。我给了float并使用了margin而不是填充来将它们放低。

CSS：

h1{
  float: left;
  margin:.5em 0em 0em 1em;
  font:bold 2em arial;
}

ul{
  float: right;
  list-style:none;
  margin: 1.5em 0em .5em;
} 

header{
 //existing styles here
 height: 55px;  // <- needed since the other elements are now floated
}