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

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 d'element2 pour s'aligner à côté d'element1 avec environ 10 pixels de remplissage entre les deux. Le problème est que la largeur d'element2 peut changer en fonction du contenu et du navigateur (taille de la police, etc.) donc, ce n'est pas toujours parfaitement aligné avec element1 (Je ne peux pas simplement appliquer une marge droite et la déplacer).

Je ne peux pas non plus changer le balisage.

Y a-t-il un moyen uniforme de les aligner? Je essayé margin-right avec un pourcentage, j'ai essayé une marge négative sur element1 pour rapprocher element2 (mais je n'ai pas pu le faire fonctionner).

54
demandé sur mskfisher 2012-01-30 21:17:16

6 réponses

En utilisant display:inline-block

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

Exemple

118
répondu Sameera Thilakasiri 2012-01-30 17:31:30
#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

15
répondu dku.rajkumar 2012-01-30 17:40:20
<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>  
4
répondu Taras S. 2018-07-05 17:39:09

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.

3
répondu Code Junkie 2012-01-30 18:17:47

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.

2
répondu Allal Mohamed 2018-01-09 14:35:44

Changez votre css comme ci-dessous

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

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

1
répondu Pavan 2012-01-30 17:23:45