如何在不改变 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>

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).

我也无法更改标记。

有没有统一的方法把它们排列起来？我尝试了用百分比右边距，我尝试了用负边距处理 element1以使 element2更接近(但无法正常工作)。

569549 次浏览
小开

改变你的 css 如下

#element1 {float:left;margin-right:10px;}
#element2 {float:left;}

这是 JSFiddle http://jsfiddle.net/a4aME/

小开 
#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;}

fiddle : http://jsfiddle.net/sKqZJ/2/

或者

#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}

小提琴: http://jsfiddle.net/sKqZJ/3/

参考资料: CSS 边距与填充的区别

小开
最佳答案

使用 display:inline-block

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

例子

小开

在使用这样的浮动元素的情况下，我通常需要确保容器元素总是足够大，可以容纳两个浮动元素的宽度以及所需的边距，以便所有元素都适合放在容器元素内部。最简单的方法显然是给两个内部元素固定宽度，这样可以正确地适应外部元素的内部，如下所示:

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

如果你不能这样做，因为这是一个缩放宽度布局，另一种选择是让每一组尺寸都是百分比，如:

#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;}

在这种情况下，我发现有时候最好的选择是不使用 float，而是使用相对/绝对定位来获得同样的效果，如下所示:

#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;}

While this isn't a floated solution, it does result in side by side columns where they are the same height, and one can remain fluid with while the other has a static width.

小开

通过使用 显示: 嵌入式块;，当您有一个父元素(除了 html 之外总是有一个父元素)时，对内部元素使用 display: inline-block;。即使窗户缩小(收缩) ，也要强迫它们保持在同一条线上。为父级添加两个属性:

white-space: nowrap;
overflow-x: auto;

下面是一个格式更加清晰的例子:

.parent {
white-space: nowrap;
overflow-x: auto;
}


.children {
display: inline-block;
margin-left: 20px;
}

For this example particularly, you can apply the above as fellow (i'm supposing the parent is body. if not you put the right parent), you can also like change the html and add a parent for them if it's possible.

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
white-space: nowrap;
overflow-x: auto;
}


#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
display: inline-block;
margin-left: 10px;
}

请记住，white-space: nowrap;和 overlow-x: auto;是什么，你需要强迫他们在一行。空白: nowrap; 禁用包装。并且 overlow-x: auto; 当元素超过帧限制时激活滚动。

小开 

div {
display: flex;
justify-content: space-between;
}
<div>
<p>Item one</p>
<a>Item two</a>
</div>

小开

这是我用于类似类型的用例作为你的。

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>


<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>

根据您的需要调整您的宽度和填充。 注意-添加“填充”时不要超过“宽度”总和的100% (ele1 _ width + ele2 _ width) ，保持小于100% 。

小开

现在的答案肯定是 display:flex，尽管我发现 space-around通常比 space-between给我更好的结果:

.container {
display: flex;
justify-content: space-around
}

提交答案