如何在同一行上alignment两个元素而不更改HTML
我在同一行上有两个元素左右浮动。
<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，我尝试了element1上的负边距，使element2更接近（但无法让它工作）。
使用display:inline-block
#element1 {display:inline-block;margin-right:10px;} #element2 {display:inline-block;}
例
#element1 {float:left;} #element2 {padding-left : 20px; float:left;}
小提琴： http : //jsfiddle.net/sKqZJ/
要么
#element1 {float:left;} #element2 {margin-left : 20px;float:left;}
小提琴： http : //jsfiddle.net/sKqZJ/1/
要么
#element1 {padding-right : 20px; float:left;} #element2 {float:left;}
小提琴： http : //jsfiddle.net/sKqZJ/2/
要么
#element1 {margin-right : 20px; float:left;} #element2 {float:left;}
小提琴： http : //jsfiddle.net/sKqZJ/3/
参考： CSS边距和填充之间的区别
在使用浮动元素的情况下，我通常需要确保容器元素总是足够大，以便两个浮动元素的宽度加上所需的边距，以使其全部适合其内部。 最简单的方法是显然要给内部元素固定的宽度，这样就可以正确地适应外部元素：
#container {width: 960px;} #element1 {float:left; width:745px; margin-right:15px;} #element2 {float:right; width:200px;}
如果你不能这样做，因为这是一个缩放宽度布局，另一个select是让每一组维度的百分比如下所示：
#element1 {float:left; width:70%; margin-right:10%} #element2 {float:right; width:20%;}
如果你需要这样的东西，这会变得棘手：
#element1 {float:left; width:70%; margin-right:10%} #element2 {float:right; width:200px;}
在这种情况下，我发现有时最好的select是不使用浮动，并使用相对/绝对定位来获得相同的效果，如下所示：
#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */ #element1 {margin-right:215px;} #element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}
虽然这不是一个浮动的解决scheme，但它确实会导致并排的柱子在相同的高度，一个可以保持stream动而另一个具有静态宽度。
改变你的CSS如下
#element1 {float:left;margin-right:10px;} #element2 {float:left;}
这里是JSFiddle http://jsfiddle.net/a4aME/
