如何在不更改 HTML 的情况下在同一行上对齐两个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9067892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align two elements on the same line without changing HTML
提问by user1074378
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>
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).
我需要 element2 在 element1 旁边排列，两者之间有大约 10 个像素的填充。问题是 element2 的宽度可以根据内容和浏览器（字体大小等）而变化，因此它并不总是与 element1 完美对齐（我不能只应用边距并将其移动过去）。
I also cannot change the markup.
我也无法更改标记。
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).
有没有统一的方法来排列它们？我尝试了一个百分比的 margin-right ，我尝试在 element1 上设置负边距以使 element2 更接近（但无法让它工作）。
回答by Sameera Thilakasiri
回答by dku.rajkumar
#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}
fiddle : http://jsfiddle.net/sKqZJ/
小提琴：http: //jsfiddle.net/sKqZJ/
or
或者
#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}
fiddle : http://jsfiddle.net/sKqZJ/1/
小提琴：http: //jsfiddle.net/sKqZJ/1/
or
或者
#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}
fiddle : http://jsfiddle.net/sKqZJ/2/
小提琴：http: //jsfiddle.net/sKqZJ/2/
or
或者
#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}
fiddle : http://jsfiddle.net/sKqZJ/3/
小提琴：http: //jsfiddle.net/sKqZJ/3/
reference : The Difference Between CSS Margins and Padding
回答by Taras S.
<style>
div {
display: flex;
justify-content: space-between;
}
</style>
<div>
<p>Item one</p>
<a>Item two</a>
</div>
回答by Mohamed Allal
By using display: inline-block;And more generally when you have a parent (always there is a parent except for html) use display: inline-block;for the inner elements. and to force them to stay in the same line even when the window get shrunk (contracted). Add for the parent the two property:
通过使用display: inline-block; 更普遍的是，当你有一个父display: inline-block;元素（除了 html 总是有一个父元素）用于内部元素时。并强制他们保持在同一行，即使窗口缩小（收缩）。为父级添加两个属性：
white-space: nowrap;
overflow-x: auto;
here a more formatted example to make it clear:
这里有一个更格式化的例子来说明：
.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.
特别是对于这个例子，你可以将上面的内容应用为同伴（我假设父母是身体。如果不是你把正确的父母），你也可以改变html并在可能的情况下为他们添加父母。
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;
}
keep in mind that white-space: nowrap;and overlow-x: auto;is what you need to force them to be in one line. white-space: nowrap; disable wrapping. And overlow-x:auto; to activate scrolling, when the element get over the frame limit.
记住，white-space: nowrap;并且overlow-x: auto;是你需要迫使他们在一条线的。空白：nowrap；禁用包装。和 overlow-x:auto; 当元素超过帧限制时激活滚动。
回答by Code Junkie
In cases where I use floated elements like that, I usually need to be sure that the container element will always be big enough for the widths of both floated elements plus the desired margin to all fit inside of it. The easiest way to do that is obviously to give both inner elements fixed widths that will fit correctly inside of the outer element like this:
在我使用这样的浮动元素的情况下，我通常需要确保容器元素总是足够大，可以容纳两个浮动元素的宽度加上所需的边距，以使其全部适合其中。最简单的方法显然是给两个内部元素固定的宽度，这样就可以正确地放在外部元素的内部：
#container {width: 960px;}
#element1 {float:left; width:745px; margin-right:15px;}
#element2 {float:right; width:200px;}
If you can't do that because this is a scaling width layout, another option is to have every set of dimensions be percentages like:
如果你不能这样做，因为这是一个缩放宽度布局，另一种选择是让每组尺寸都是百分比，如：
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}
This gets tricky where you need something like this:
当您需要这样的东西时，这会变得棘手：
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}
In cases like that, I find that sometimes the best option is to not use floats, and use relative/absolute positioning to get the same effect like this:
在这种情况下，我发现有时最好的选择是不使用浮点数，而使用相对/绝对定位来获得相同的效果：
#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.
虽然这不是浮动解决方案，但它确实导致并排列的高度相同，并且一个可以保持流动，而另一个具有静态宽度。
回答by Pavan
Change your css as below
改变你的css如下
#element1 {float:left;margin-right:10px;}
#element2 {float:left;}
Here is the JSFiddle http://jsfiddle.net/a4aME/
这是 JSFiddle http://jsfiddle.net/a4aME/
回答by Abhishek Kumar
This is what I used for similar type of use case as yours.
这是我用于与您类似的用例类型。
<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>
Adjust your width and padding as per your requirement. Note - Do not exceed 'width' more than 100% altogether (ele1_width+ ele2_width) to add 'padding', keep it less than 100%.
根据您的要求调整宽度和填充。注意 - 不要超过 'width' 总共超过 100% (ele1_width+ ele2_width) 来添加 'padding'，保持它小于 100%。
