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

Question

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

<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完美对齐（我不能仅仅应用右移边距并将其移到上方）。

我也无法更改标记。

是否有统一的方法将它们排列在一起？我尝试以一定的百分比对边距进行右对齐，对element1进行了负边距处理以使element2更近（但无法使其正常工作）。

Answer 1

使用 display:inline-block

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