Comment aligner deux éléments sur la même ligne sans modifier HTML

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

Violon : http://jsfiddle.net/sKqZJ/

Ou

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

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

Ou

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

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

Ou

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

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

Référence: La différence entre les marges CSS et le remplissage

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

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

Dans les cas où j'utilise des éléments flottants comme ça, je dois généralement être sûr que l'élément conteneur sera toujours assez grand pour les largeurs des deux éléments flottants plus la marge désirée pour tous s'adapter à l'intérieur de celui-ci. La façon la plus simple de le faire est évidemment de donner aux deux éléments internes des largeurs fixes qui s'adapteront correctement à l'intérieur de l'élément externe comme ceci:

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

Si vous ne pouvez pas le faire car il s'agit d'une disposition de largeur de mise à l'échelle, une autre option consiste à avoir chaque ensemble de dimensions être des pourcentages comme:

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

Cela devient délicat où vous avez besoin de quelque chose comme ceci:

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

Dans des cas comme celui-ci, je trouve que parfois la meilleure option est de ne pas utiliser de flotteurs, et d'utiliser un positionnement relatif/absolu pour obtenir le même effet comme ceci:

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

Bien que ce ne soit pas une solution flottante, il en résulte des colonnes côte à côte où elles ont la même hauteur, et l'une peut rester fluide avec tandis que l'autre a une largeur statique.

En utilisant display: inline-block; et plus généralement lorsque vous avez un parent (il y a toujours un parent sauf pour html) utilisez display: inline-block; pour les éléments internes. et de les forcer à rester dans la même ligne, même lorsque la fenêtre se rétrécit (contracté). Ajoutez pour le parent les deux propriétés:

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

Voici un exemple plus formaté pour le rendre clair:

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

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

Pour cet exemple en particulier, vous pouvez appliquer ce qui précède en tant que fellow (je suppose que le parent est le corps. si pas vous mettre la droite parent), vous pouvez également modifier le html et ajouter un parent pour eux si c'est possible.

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

Gardez à l'esprit que white-space: nowrap; et overlow-x: auto; sont ce dont vous avez besoin pour les forcer à être dans une ligne. espace blanc: nowrap; désactiver l'emballage. Et overlow-x: auto; pour activer le défilement, lorsque l'élément dépasse la limite d'image.

Changez votre css comme ci-dessous

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

Voici le JSFiddle http://jsfiddle.net/a4aME/