Text-Align ohne Float für Menüleiste mit CSS

Question

Ich hätte gerne auf der folgenden Menüleiste drei Elemente auf der linken Seite, die andere (eMail) auf der rechten Seite.

ul.menubar { 
 
    list-style-type: none; /* entfernt Bulletpoints */ 
 
    margin-left: 5px; 
 
    padding: 0px; 
 
    overflow-x: hidden; 
 
    background-color: #FFFFFF; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 1; 
 
    border-bottom: solid 1px #D4D4D4; 
 
} 
 

 
ul.menubar li { 
 
    float: left; /* Elemente sind linksbünding NEBENEINANDER angeordnet */ 
 
    margin: 0px 10px 0px 10px; 
 
} 
 

 

 
#eMail { 
 
    position: right; 
 
    display: inline-block; 
 
    text-align: right; 
 
    float: right; 
 
} 
 

 
ul.menubar li a { 
 
    color: black; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding:15px; /* Innenabstand im Element bis zum Rand */ 
 
    text-decoration: none; /* entfernt Unterstreichen der Elemente*/ 
 
    transition: 0.3s; /* Animation zu :hover*/ 
 
    font-family: Century Gothic; 
 
}

<ul class="menubar" id=topmenubar> 
 
     <li><a href="#linkHome">Logo</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?--> 
 
     <li><a href="#linkContact">Contact</a></a></li> 
 
     <li><a href="#linkAbout">About</a></li> 
 
     <li><a href="#linkEmail" "id="eMail">eMail</a></li> 
 
</ul>

Wie ich sehe float (und text-align/Position auch) nicht funktioniert. Was kann ich tun, um den E-Mail-Link auf die rechte Seite zu verschieben?

Regards, Jonas

Answer 1

Sie können das letzte Element, das eine E-Mail ist, mit dem Selektor nth-child() auswählen. Und der folgende Code platzieren Sie die E-Mail-Registerkarte auf der rechten Seite des Menüs.

li:nth-child(4) { 
    float: right !important; 
} 

Answer 2

Verschieben der id="eMail" die <a> und dem Mutterelement <li>, wie jene li s off-Attribut haben floating Arten an denen, die die Anordnung der Elemente innerhalb a sind zu bestimmen. Dann sollte float: right; ausreichen.

Answer 3

Genau dies tun:

.menubar li:last-of-type { 
float: right; 
} 

Gleich nach der .menubar li Regel, die Sie jetzt haben, und löschen Sie die gesamte #eMail -Regel