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

【问题标题】：How to align two elements on the same line without changing HTML如何在不更改 HTML 的情况下对齐同一行上的两个元素
【发布时间】：2012-02-22 11:37:37
【问题描述】：

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

<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 更接近（但无法使其工作）。

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

使用display:inline-block

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

Example

【讨论】：

我试过了。它仅在您为元素 1 和/或元素 2 设置宽度时才有效。

【解决方案2】：

div {
  display: flex;
  justify-content: space-between;
}

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

【讨论】：

最好的解决方案...非常感谢

【解决方案3】：

#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/

参考：The Difference Between CSS Margins and Padding

【讨论】：

【解决方案4】：

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

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

这里有一个格式更清晰的示例：

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

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

特别是对于这个例子，你可以将上面的内容应用为同伴（我假设父母是身体。如果不是你把正确的父母），如果可能的话，你也可以改变 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;当元素超过帧限制时激活滚动。

【讨论】：

【解决方案5】：

如下改变你的css

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

这是我用于与您类似的用例的。

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

【讨论】：