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

我想要完成的是在左下角有一个h1，右下角有一个ul。 enter image description here 如何正确定位块元素的垂直和水平？

我做了一个jsfiddle因为它还不完全正确。

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

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

第三个替代方案可能是使用display:inline-block，但这甚至没有正确的水平对齐。

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

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

来源

2014-02-08 RubenGeert

机会是你要为使用'位置：absolute'或'float'。在这种情况下，'float'就足够了，而不必使用边距，只需要在必要时使用'line-height'。 – EmileKumfa

这里是一个解决方案，它可以为你工作：

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 
}

来源

2014-02-08 07:10:09 badAdviceGuy

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

回答

相关问题