Aligner à droite et à gauche aligner ul li éléments dans la barre de navigation horizontale

Je suis codage d'une barre de navigation horizontale pour mon site.
Le html est comme suit:

        <nav>
            <ul>
                <li class="special_text"><a href="#">Hello1</a></li>
                <li><a href="#">Hello2</a></li>
                <li><a href="#">Hello3</a></li>
            </ul>
        </nav>

Le css est comme suit:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    margin: 15px auto;
    border: 1px solid black;
}

header {

}

ul {
    list-style: none;
    padding: 1em 0;
    border-bottom: 2px solid #61f231;
    border-top: 2px solid #61f231;
}

li {
    display: inline;
    padding: 0 1.5em;
    border-left: 2px solid #61f231;
}

li.special_text {
    font-size: 200%;
    font-weight: bold;
    color: black;
    font-family: "Arial Black";
}

li.special_text a {
    text-decoration: none;
}

Je voudrais avoir quelques <li> éléments alignés à gauche, tandis que d'autres aligner à droite.
Lorsque j'essaie de flotteur de celles que je veux à gauche ou à droite il y a un problème avec l'alignement vertical (les éléments ne sont plus alignés verticalement à l'intérieur de la <ul> élément.

Une partie du problème découle du fait que la première <li> élément utilise une autre taille de police.

Des suggestions?

Merci

Il n'est pas clair pour moi ce que tu veux dire par aligner à gauche ou à droite. Par flottante eux de gauche ou de droite, il semble que vous essayez d'avoir 2 colonnes, mais alors vous parlez de l'alignement vertical être mal et qui me fait penser que vous voulez juste de juste de gamme (text-align) de la li. Pourriez-vous préciser ce que vous êtes obligé de sortie?

OriginalL'auteur theyuv | 2014-10-16

  1. 9

    Tout ce que vous devez faire est de conclure ce que vous voulez dans les divs et float eux left et right:

    <nav>
        <ul><div class="floatleft">
                <li class="special_text"><a href="#">Hello1</a></li>
            </div>
            <div class="floatright">
                <li><a href="#">Hello2</a></li>
                <li><a href="#">Hello3</a></li>
            </div>
        </ul>
</nav>

    et les ajouter à votre css:

    .floatleft {
    float:left;
}
.floatright {
    float:right;
}

    Pour résoudre le problème avec l'alignement vertical, vous avez besoin de perdre son temps avec line-height affectées li éléments

    Découvrez le violon

    Merci. Cela semble être une bonne solution. Pouvez-vous expliquer un peu comment vous avez choisi une valeur de 30 pour la hauteur et la hauteur de la ligne des propriétés? J'ai lu sur ces propriétés et encore ne vois pas pourquoi ce sont ces valeurs qui sont appropriés. Aussi, dois-je m'attendre à des problèmes avec le fait que ces valeurs sont en pixels au lieu des pourcentages ou des unités relatives? Merci
    <div> à l'intérieur de <ul> n'est pas valide.
    starvator....obtenez de l'abus de l'élément de l'approche. Bien que la plupart des environnements de crier, c'est une bonne façon de compartimenter un contrôle continu de leurs côtés respectifs.
    parfois, vous devez briser les Règles imposées pour obtenir une solution simple de mise en œuvre. Penser en dehors de la display:box et pense plus display:flex.

    OriginalL'auteur starvator

  2. 0

    Si vos articles ne seront pas avoir plus d'une ligne de texte que vous pouvez utiliser line-height pour définir la verticale algnment. Essayez ceci:

    ul {
    list-style: none;
    border-bottom: 2px solid #61f231;
    border-top: 2px solid #61f231;
    line-height:2.5em;
}

/*Remove the padding*/

    Cochez cette Démo De Violon

    Cela dépend de ce qu'il entend par the elements are no longer vertically aligned within the <ul> element. la modification de la hauteur de la ligne sur le ul sera à la verticale du centre, la modifier, sur le li permettra d'aligner la base du texte

    OriginalL'auteur DaniP

  3. 0

    Alternativement, vous pouvez ajouter rembourrage comme ceci: li:first-child{padding-right: 150px;}

    Voir mon violon

    OriginalL'auteur Edwin