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

【问题标题】：How to properly position block elements vertically and horizontally?如何正确地垂直和水平定位块元素？
【发布时间】：2014-03-05 18:15:15
【问题描述】：

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

我为它创建了一个jsfiddle，但还不太正确。

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

一个明显的替代方案似乎是使用float:left; 和float:right;，但在这种情况下ul 会坐得太高。也许我可以通过添加margin-top 来“推倒它”，但我必须弄清楚在这种情况下到底有多少。看起来一点也不优雅。

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

选项 4 似乎在修改 position:relative，但我必须再次弄清楚在这种情况下需要调整多少位置。

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

【问题讨论】：

您可能会使用position:absolute 或float。在这种情况下，float 就足够了，您不必使用边距，您只需要在必要时使用 line-height。

标签： css layout css-float positioning

【解决方案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
}

【讨论】：