如何在不更改 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 更接近（但无法让它工作）。

原文由 user1074378 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 display:inline-block

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

例子

原文由 Sameera Thilakasiri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 div {
  display: flex;
  justify-content: space-between;
}

 <div>
  <p>Item one</p>
  <a>Item two</a>
</div>

原文由 Taras S. 发布，翻译遵循 CC BY-SA 4.0 许可协议