Text-align without float for menubar with css

Question

Я хотел бы иметь на следующей строке меню три элемента слева, а другой (eMail) на правой стороне.

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>

Как я вижу поплавок (и выравнивания текста/положение а) не работает. Что я могу сделать, чтобы переместить ссылку электронной почты на правую сторону?

С уважением, Jonas

Answer 1

Вы можете выбрать последний элемент, который является электронной почтой с помощью селектора nth-child(). И следующий код разместите вкладку электронной почты справа от меню.

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

Answer 2

Переместите id="eMail" атрибут выключен в <a> и к элементу родительского <li>, как те li с имеют плавающие стили на них, которые являются определяющими размещение в a элементов внутри. Тогда должно быть достаточно float: right;.

Answer 3

Просто сделайте это:

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

Сразу же после .menubar li правила у вас есть сейчас, и удалить все #eMail -правило