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

Mam dwa elementy na tej samej linii pływające 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ę, aby element2 wyrównał się obok elementu1 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ównana z elementem1 (nie mogę po prostu zastosować marginesu w prawo i przesunąć go).

Nie mogę też zmienić znaczników.

Czy istnieje jednolity sposób ich wyrównania? Próbowałem z wartością procentową z marginesem, próbowałem z ujemnym marginesem na elemencie1, aby zbliżyć element2 do siebie (ale nie mogłem go uruchomić).

Za pomocą display:inline-block

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

Przykład

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

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

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

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

lub

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

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

lub

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

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

lub

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

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

odniesienie: Różnica między marginesami CSS a wypełnieniem

Używając display: inline-block; I bardziej ogólnie, gdy masz rodzica (zawsze jest rodzic, z wyjątkiem html), użyj display: inline-block;elementów wewnętrznych. i zmusić je do pozostania w tej samej linii, nawet gdy okno się skurczy (skurczy). Dodaj dla rodzica dwie właściwości:

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

tutaj bardziej sformatowany przykład, aby było jasne:

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

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

Szczególnie w tym przykładzie możesz zastosować powyższe jako kolega (przypuszczam, że rodzic jest treścią. Jeśli nie, umieść właściwego rodzica), możesz także zmienić kod HTML i dodać dla nich 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ętaj o tym white-space: nowrap;i overlow-x: auto;to jest to, czego potrzebujesz, aby zmusić ich do pozostania w jednej linii. spacja: nowrap; wyłącz zawijanie. I overlow-x: auto; aby aktywować przewijanie, gdy element przekroczy limit ramki.

W przypadkach, w których używam takich elementów pływających, zwykle muszę mieć pewność, że element kontenera będzie zawsze wystarczająco duży, aby szerokość obu elementów pływających plus wymagany margines zmieścił się w nim. Najłatwiejszym sposobem jest oczywiście nadanie obu elementom wewnętrznym stałej szerokości, która będzie pasować do wnętrza elementu zewnętrznego w następujący sposób:

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

Jeśli nie możesz tego zrobić, ponieważ jest to układ ze skalowaniem szerokości, inną opcją jest ustawienie każdego zestawu wymiarów w procentach, takich jak:

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

To staje się trudne, gdy potrzebujesz czegoś takiego:

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

W takich przypadkach uważam, że czasami najlepszą opcją jest rezygnacja z pływaków i użycie pozycjonowania względnego / bezwzględnego, aby uzyskać taki sam efekt:

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

Chociaż nie jest to rozwiązanie pływające, powoduje to, że kolumny obok siebie mają tę samą wysokość i jedna z nich może pozostać płynna, podczas gdy druga ma statyczną szerokość.

Zmień swój CSS, jak poniżej

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

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

To jest to, czego użyłem w przypadku podobnego rodzaju użycia jak twój.

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

Dostosuj szerokość i wyściółkę zgodnie z wymaganiami. Uwaga - nie przekraczaj 'width' więcej niż 100% łącznie (ele1_width + ele2_width), aby dodać 'dopełnienie', utrzymuj to mniej niż 100%.