html - 如何在不更改 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 完美对齐(我不能只应用 margin-right 并将其移到上方)。

我也无法更改标记。

是否有统一的排列方式？我尝试了 margin-right 百分比，我尝试了 element1 的负边距以使 element2 更接近(但无法让它工作)。

Answer 1

使用 display:inline-block

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

Example