如何在不更改 HTML 的情況下對齊同一行上的兩個元素

Question

我在同一行上有兩個元素向左浮動和向右浮動。

<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更接近（但無法讓它工作）。

Answer 1

使用display:inline-block

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

例子

Answer 2

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

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

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

參考： CSS 邊距和內邊距的區別

Answer 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; 當元素超過幀限制時激活滾動。

Answer 5

改變你的CSS如下

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

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

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

雖然這不是一個浮動的解決方案，但它確實會導致它們的高度相同的並排的列，並且一個可以保持流動，而另一個具有靜態寬度。

Answer 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>

根據您的要求調整寬度和填充。 注意 - 不要超過 'width' 超過 100% (ele1_width+ ele2_width) 來添加 'padding'，保持它小於 100%。

Answer 8

現代答案肯定是display:flex ，盡管我發現space-around通常比space-between給我更好的結果：

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