html - 如何在不更改HTML的情况下在同一行上对齐两个元素

我在同一行上有两个元素向左 float 和向右 float 。

<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

我需要element2在element1旁边对齐，并在两者之间填充约10个像素。问题在于element2的宽度可以根据内容和浏览器(字体大小等)而变化，因此它并不总是与element1完美对齐(我不能仅应用右移边距并将其移到上方)。

我也无法更改标记。

是否有统一的方法将它们排列在一起？我尝试使用百分比向右 margin ，我对element1尝试了负的 margin ，以使element2更近(但无法使其正常工作)。

最佳答案

使用display:inline-block

#element1 {display:inline-block;margin-right:10px;}
#element2 {display:inline-block;}

Example

关于html - 如何在不更改HTML的情况下在同一行上对齐两个元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9067892/