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

Question

J'ai deux éléments sur la même ligne, flottant à gauche et flottant à droite.

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

J'ai besoin que l'élément 2 s'aligne à côté de l'élément 1 avec environ 10 pixels d'espacement entre les deux. Le problème est que la largeur de l'élément 2 peut changer en fonction du contenu et du navigateur (taille de la police, etc.), de sorte qu'il n'est pas toujours parfaitement aligné sur l'élément 1 (je ne peux pas simplement appliquer une marge droite et le déplacer).

Je ne peux pas non plus modifier le balisage.

Existe-t-il une méthode uniforme pour les aligner ? J'ai essayé la marge droite avec un pourcentage, j'ai essayé une marge négative sur l'élément 1 pour rapprocher l'élément 2 (mais je n'ai pas réussi à le faire).

Answer 1

Utilisation display:inline-block

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

Ejemplo

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

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 rembourrage

Answer 4

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 pour les forcer à rester sur la même ligne même lorsque la fenêtre est réduite (contractée). Ajoutez pour le parent les deux propriétés :

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

Voici un exemple plus formaté pour clarifier les choses :

.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 comme un camarade (je suppose que le parent est body. si ce n'est pas le cas, vous mettez le bon parent), vous pouvez également changer 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; 
}

garder à l'esprit que white-space: nowrap; et overlow-x: auto; est ce dont vous avez besoin pour les forcer à être sur une seule ligne. white-space : nowrap ; disable wrapping. Et overlow-x:auto ; pour activer le défilement, lorsque l'élément dépasse la limite du cadre.

Answer 5

Modifiez votre code CSS comme suit

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

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