Aligner Élément Inline à Droite

Comment aligner le texte de deux éléments, l'un à gauche et l'autre vers la droite, toujours sur la même ligne. Je suis conscient que cela peut être fait à l'aide de flotteurs, mais je voudrais un flotteur de moins de solution. Je suis à la recherche d'un moyen de le faire à l'aide de display:inline.

HTML:

<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>

CSS:

.container {
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    display: inline;
}

.inlineRight {
    ...align right...   
}

Vous auriez besoin de inline-block et ensuite, vous pouvez simplement essayer d'ajuster les marges

OriginalL'auteur Robert Peek | 2013-07-21

css

13

vous pouvez simplement utiliser position:absolute sur les éléments en ligne et position:relative sur le conteneur. Ensuite, vous pouvez aligner les éléments en ligne de la manière que vous voulez par rapport au conteneur. Quelque chose comme ceci:
```
.container {
    position: relative;
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    position: absolute;
    display: inline;
}

.inlineRight {
    right: 0;
}
```
DÉMO

Regardez de plus près à votre démo et vous verrez que le conteneur height est de 0, ce qui est certainement toutes sortes de mal. Le conteneur est à la hauteur de contient de ses éléments.

OriginalL'auteur Martin Turjak
3

Pourquoi fais-tu comme ça?

Vous pouvez facilement avoir le même résultat avec un non-ordonnée de la liste sans les divs.

Assurez-vous de définir le texte-align propriété pour le premier élément de la liste de "gauche" (ul li:first-child), et définir le texte-align propriété pour les autres éléments de la liste (ul li) à "droite".

Mise à JOUR - Voici le code de cette demande:

HTML
```
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
```
CSS
```
ul{
padding: 0 0;
margin: 0 0;
list-style: none;
width: 600px;
border: 1px solid blue;
height: 30px;
}

ul li{
width: 300px;
display: block;
float: left;
text-align: right;
line-height: 30px;
}

ul li:first-child{
text-align: left;
}
```
DÉMO

Aligner à gauche et à droite, mais sur deux suppurer lignes. Ai-je besoin pour faire de chaque li display:inline?
Oui j'ai oublié de mentionner: veuillez ajouter la propriété "float" est égal à "gauche" (ul li) niveau css. Confiance en moi, c'est la façon de le faire. Vous shoudn pas utiliser des Divs pour cela.
Si vous êtes encore dans le doute, faites le moi savoir et je vais créer un violon pour vous.
Je crois que je comprends ce que vos me dire de le faire, mais ça ne fonctionne pas. S'il vous plaît créer un violon, je vous remercie. S'il est flottant, les enfants ne devraient pas vous laisser flotter le parent, le parent de l'élément ne s'effondre.
jsfiddle.net/wassim_taher/3c976/1

OriginalL'auteur Wassim Taher
2

ajouter ceci dans votre css
```
.inlineLeft, .inlineRight {
    display: inline-block;
}

.inlineRight {
   display:inline-block;
    position:absolute;
    right:0;
    margin-right:8px;
}
```
Démo

Qui me met dans la bonne direction. Si j'ajoute position:relative à l'élément conteneur, inlineRight est aligné à droite à l'intérieur de l'élément conteneur qui est ce que je veux. Mais si j'ajoute padding:8px le contenant, il n'y a pas de droit de rembourrage sur les inlineRight élément. Avez-vous un correctif sans changer de droite:0. Peut-être anothe exemple qui gardent inlineRight dans le flux. Utiliser position:absolute prend l'élément de flux.
ajouter margin-right:8px .inlineLeft, .inlineRight vous pouvez le voir dans les mises à jour de la démo
Semble assez bon, mais je vais avoir un peu d'un problème. Pouvez-vous m'aider ici? Pourquoi est-il cet arbitraire 4.182 px écart ci-dessous les images de la cette mise à jour de violon, même si elle n'est pas soutenue par les CSS?

OriginalL'auteur Abdul Malik
1

Vous pouvez utiliser text-align:justifier + après le pseudo-élément pour justifier cette première ligne:

http://codepen.io/anon/pen/JeAgk
```
.contailner {
  line-height:0;
  text-align:justify;
}
.contailner > div {
  display:inline-block;
  line-height:1.2em;
}
.contailner:after {
  content:'';
  display:inline-block;
  width:100%;
}
```
Si vous utiliser un élément vide au lieu de pseudo-élément, alors vous avez une technique qui est utilisable depuis text-align:justifier existe, quels sont les moyens compatible avec tous les navigateurs.

flexible, cette technique vous permettent de créer facilement un système de grille.

OriginalL'auteur G-Cyr

Vous devez vous connecter pour publier un commentaire.

DÉMO