如何在不改变HTML的同一行上对齐两个元素 [英] How to align two elements on the same line without changing HTML

问题描述

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

I have two elements on the same line floated left and floated right.

<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完美排列（我不能只是应用一个边距右移动它）。

I need for element2 to line up next to element1 with about 10 pixels of padding between the two. The problem is that element2's width can change depending on content and browser (font size, etc.) so it's not always lined up perfectly with element1 (I can't just apply a margin-right and move it over).

我也无法更改标记。

有统一的方法排列吗？我尝试了margin-right与一个百分比，我试图在element1的负边距使element2更接近（但不能让它工作）。

Is there a uniform way to line them up? I tried margin-right with a percentage, I tried a negative margin on element1 to bring element2 closer (but couldn't get it to work).

推荐答案

使用 display：inline-block

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

示例

Example

这篇关于如何在不改变HTML的同一行上对齐两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！