如何在不更改HTML的情况下在同一行上对齐两个元素

Question 1

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

<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完美地对齐（我不能只应用右边距并将其移到上方）。

我也无法更改标记。

是否有统一的方法将它们排列在一起？我尝试使用百分比对边距进行右对齐，对元素1进行负边距处理以使元素2更近（但无法使其正常工作）。

Question 2

使用 display:inline-block

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

例

Question 3

<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

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

Question 4

#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边距和填充之间的区别

Question 5

通过使用display：inline-block; 而且更普遍的是，当您有一个display: inline-block;内部元素时，使用父级（除了html之外，总是有一个父级）。并且即使窗口缩小（收缩），也迫使他们保持在同一行。为父项添加两个属性：

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

这是一个更格式化的示例，以使其更加清楚：

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

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

特别是对于此示例，您可以将上面的内容应用为同伴（我假设父对象是body。如果您未放置正确的父对象，则还可以），如果可能，还可以更改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; 
}

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

Question 6

在使用这样的浮动元素的情况下，通常需要确保container元素始终足够大，足以容纳两个浮动元素的宽度加上所需的边距以适合其内部。最简单的方法显然是给两个内部元素固定宽度，使其正确地适合外部元素内部，如下所示：

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

在这种情况下，我发现有时最好的选择是不使用浮点数，而使用相对/绝对定位来获得类似的效果：

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

虽然这不是浮动解决方案，但确实会导致并排的列具有相同的高度，并且其中一个可以保持流动，而另一个具有静态宽度。

Question 7

如下更改您的css

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

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

Question 8

这就是我用于与您类似的用例类型的内容。

<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％。