web-dev-qa-db-fra.com

Comment aligner deux éléments sur la même ligne sans changer 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 que element2 s'aligne à côté de element1 avec environ 10 pixels de remplissage entre les deux. Le problème est que la largeur de element2 peut changer en fonction du contenu et du navigateur (taille de la police, etc.), de sorte qu'elle n'est pas toujours parfaitement alignée 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? J'ai essayé margin-right avec un pourcentage, j'ai essayé une marge négative sur element1 pour rapprocher element2 (mais je n'ai pas réussi à la faire fonctionner).

htmlcsscss-floatmargin
70
user1074378

Utiliser display:inline-block

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

Exemple

142
Sameera Thilakasiri
#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/

reference: La différence entre les marges CSS et le rembourrage

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

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>
9
Taras S.

En utilisant display: inline-block; Et plus généralement quand vous avez un parent (il y a toujours un parent sauf pour le HTML), utilisez display: inline-block; pour les éléments internes. et pour les forcer à rester dans la même ligne même lorsque la fenêtre est rétrécie (contractée). 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 compagnon (je suppose que le parent est corps. Si vous ne le mettez pas correctement), vous pouvez également changer le code HTML et ajouter un parent pour eux si cela 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; est ce dont vous avez besoin pour les forcer à être sur une seule ligne. espace blanc: maintenant; désactiver l'emballage. Et overlow-x: auto; pour activer le défilement lorsque l’élément dépasse la limite du nombre d’images.

5
Mohamed Allal

Dans les cas où j'utilise des éléments flottants de ce type, je dois généralement m'assurer que l'élément conteneur sera toujours suffisamment grand pour les largeurs des deux éléments flottants plus la marge souhaitée pour que tout se glisse à 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’ajusteront 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 d'échelle, une autre option consiste à définir chaque jeu de dimensions sous forme de pourcentages tels que:

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

Cela devient difficile là où vous avez besoin de quelque chose comme ça:

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

Dans de tels cas, je trouve que parfois, la meilleure option consiste à ne pas utiliser de flottants et à utiliser le 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. L'une peut rester fluide tandis que l'autre a une largeur statique.

3
Code Junkie

Changez votre css comme ci-dessous

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

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

2
Pavan

C’est ce que j’ai utilisé pour un type de cas d’utilisation similaire au vôtre.

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

Ajustez votre largeur et votre rembourrage selon vos besoins. Remarque - Ne dépassez pas la 'largeur' de plus de 100% (ele1_width + ele2_width) pour ajouter 'padding', maintenez-le à moins de 100%.

0
Abhishek Kumar