Jak wyrównać dwa elementy na tej samej linii bez zmiany HTML

Question

Mam dwa elementy na tej samej linii unoszone w lewo i pływające w prawo.

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

Potrzebuję elementu 2 do wyrównania obok elementu 1 z około 10 pikselami wypełnienia między nimi. Problem polega na tym, że szerokość elementu2 może się zmieniać w zależności od zawartości i przeglądarki (rozmiar czcionki itp.), Więc nie zawsze jest idealnie wyrównany z elementem 1 (nie mogę po prostu zastosować marginesu i przenieść go).

Nie mogę również zmienić znaczników.

Czy istnieje jednolity sposób ich wyrównywania? Próbowałem marginesu z procentem, próbowałem ujemnego marginesu na element 1, aby przybliżyć element2 (ale nie mogłem go uruchomić).

Answer 1

Korzystanie display:inline-block

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

Example

Answer 2

Zmień css jak poniżej

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

Oto JSFiddle http://jsfiddle.net/a4aME/

Answer 3

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

skrzypce: http://jsfiddle.net/sKqZJ/

lub

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

skrzypacz: http://jsfiddle.net/sKqZJ/1/

lub

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

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

lub

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

skrzypacz: http://jsfiddle.net/sKqZJ/3/

odniesienia: The Difference Between CSS Margins and Padding

Answer 4

W przypadkach, gdy używam elementów pływających tak, ja zwykle muszą mieć pewność, że element pojemnik zawsze będzie wystarczająco duży dla szerokościach zarówno elementy pływające plus pożądany margines, aby wszystkie pasowały do ​​wnętrza.Najprostszym sposobem na to jest oczywiście, aby dać obu elementów wewnętrznej stałych szerokościach, który będzie pasował prawidłowo wewnątrz zewnętrznego elementu tak:

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

Jeśli nie można tego zrobić, bo to jest układ szerokość skalowania, inny opcja jest mieć każdy zestaw wymiarów być procenty jak:

#element1 {float:left; width:70%; margin-right:10%} 
#element2 {float:right; width:20%;} 

to dostaje trudne, gdzie trzeba coś takiego:

#element1 {float:left; width:70%; margin-right:10%} 
#element2 {float:right; width:200px;} 

w takich przypadkach, że znajdę th co czasami najlepszym rozwiązaniem jest, aby nie używać pływaków i używać względnej/bezwzględnej pozycjonowanie, aby uzyskać taki sam efekt jak poniżej:

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

Choć nie jest to Floated rozwiązanie to powoduje boku przez kolumny boku, gdzie są tej samej wysokości i można pozostać płynnym, podczas gdy drugi ma stałą szerokość.

Answer 5

Za pomocą wyświetlacza : wbudowany blok; A bardziej ogólnie, gdy masz rodzica (zawsze jest rodzic z wyjątkiem html) użyj display: inline-block; dla wewnętrznych elementów. i zmusić ich do pozostania w tej samej linii, nawet gdy okno się skurczy (zakontraktowane). Dodaj do rodzica dwie właściwości:

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

tutaj bardziej sformatowane przykład jasno:

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

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

W tym przykładzie szczególnie, można zastosować powyższe jako faceta (Jestem przy założeniu rodzic jest ciałem, jeśli nie umieścisz właściwego rodzica), możesz również zmienić HTML i dodać rodzica, jeśli to możliwe.

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

pamiętać, że white-space: nowrap; i overlow-x: auto; jest to, czego potrzebujesz, aby zmusić ich do być w jednej linii. white-space: nowrap; wyłącz owijanie. I overlow-x: auto; aby włączyć przewijanie, gdy element przekroczy limit klatek.