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

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

Http://jsfiddle.net/sKqZJ/

Lub

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

Http://jsfiddle.net/sKqZJ/1/

Lub

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

Http://jsfiddle.net/sKqZJ/2/

Lub

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

Http://jsfiddle.net/sKqZJ/3/

Referencja: różnica między marginesami CSS a Paddingiem

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

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

W przypadkach, w których używam takich elementów pływających, zazwyczaj muszę mieć pewność, że element kontenera zawsze będzie wystarczająco duży, aby szerokość obu elementów pływających plus pożądany margines pasowały do niego. Najprostszym sposobem na to jest oczywiście nadanie obu elementom wewnętrznym stałych szerokości, które będą pasowały poprawnie do wnętrza elementu zewnętrznego w ten 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 skalowania szerokości, inną opcją jest posiadanie każdego zestawu wymiarów bądź procentowy jak:

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

To robi 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 nie używać pływaków, a użyć pozycjonowania względnego / absolutnego, aby uzyskać taki sam efekt jak ten:

#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ływakowe, to powoduje, że kolumny obok siebie mają tę samą wysokość, a jedna może pozostać płynna, podczas gdy druga ma szerokość statyczną.

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; dla elementów wewnętrznych. i zmusić ich do pozostania w tej samej linii, nawet gdy okno się skurczy (zakontraktowane). Dodaj dla rodzica dwie właściwości:

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

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

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

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

W tym przykładzie, możesz zastosować powyższe jako kolega (zakładam, że rodzicem jest ciało. jeśli nie możesz umieścić prawy rodzic), możesz również zmienić html i dodać rodzica dla nich, 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, że white-space: nowrap; i overlow-x: auto; jest to, czego potrzebujesz, aby zmusić ich do bycia w jednej linii. white-space: nowrap; wyłącz zawijanie. I overlow-x:auto; aby aktywować przewijanie, gdy element przekroczy limit ramek.

Zmień swój css jak poniżej

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

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