Aligner deux blocs en ligne à gauche et à droite sur la même ligne

Question

Comment puis-je aligner deux inline-blocs de sorte que l'on est à gauche et l'autre est à droite sur la même ligne? Pourquoi est-ce si difficile? Est-il quelque chose comme de LaTeX \hfill qui peuvent consommer de l'espace entre eux pour atteindre cette?

Je ne veux pas utiliser des flotteurs , car avec inline-blocks, je peux aligner les lignes de base. Et lorsque la fenêtre est trop petite pour deux d'entre eux, avec inline-blocks je peux juste changer le texte aligner au centre et ils seront centrés l'un sur l'autre. Parent(parent) + Absolue(élément) de positionnement a les mêmes problèmes que les flotteurs ne.

Le HTML5:

<header>
    <h1>Title</h1>
    <nav>
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </nav>
</header>

Le css:

header {
    //text-align: center; // will set in js when the nav overflows (i think)
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

nav {
    display: inline-block;
    vertical-align: baseline;
}

Thery sommes juste à côté de l'autre, mais je veux l' nav sur le droit.

Answer 1

Vous pouvez utiliser l' text-align: justify technique ici.

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

L'exemple peut être vu ici: http://jsfiddle.net/skip405/NfeVh/4/. Ce code fonctionne à partir de IE7 et au-dessus

Si nous ne nous soucions pas IE7 tout simplement omettre le star-hack propriétés. L'exemple de travail à l'aide de votre balisage est ici - http://jsfiddle.net/skip405/NfeVh/5/. J'ai juste ajouté l' header:after de la partie et ont justifié le contenu.

Afin de résoudre le problème de l'espace supplémentaire qui est insérée avec l' after pseudo-élément, on peut faire un truc de réglage de l' font-size à 0 pour le parent de l'élément et de le réinitialiser pour me dire 14px pour les éléments enfants. L'exemple de cette astuce peut être vu ici: http://jsfiddle.net/skip405/NfeVh/326/

Answer 2

Si vous ne voulez pas utiliser de float, vous devrez envelopper votre navigation:

 <header>
<h1>Title</h1>
<div id="navWrap">
<nav>
    <a>A Link</a>
    <a>Another Link</a>
    <a>A Third Link</a>
</nav>
</div>
</header>
 

... et ajouter des css plus spécifiques:

 header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}

h1 {
display: inline-block;
margin-top: 0.321em;
}

#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}

nav {
display: inline-block;
vertical-align: baseline;
}
 

Vous devrez peut-être faire un peu plus, mais c'est un début.

Answer 3

Si vous utilisez déjà JavaScript pour centrer des éléments lorsque l'écran est trop petit (selon votre commentaire pour votre en-tête), pourquoi ne pas annuler les flottants / marges avec JavaScript lorsque vous y êtes et utilisez les flottants et les marges normalement.

Vous pouvez même utiliser des requêtes de média CSS pour réduire la quantité de JavaScript que vous utilisez.

Answer 4

donnez-lui float: right et h1 float: left et mettez un élément avec clear: les deux après eux.