文字对齐不带浮动用于菜单栏与css

我想在左边的菜单栏三个项目，右边的另一个（电子邮件）。文字对齐不带浮动用于菜单栏与css

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>

当我看到浮动（和文本对齐/位置为好）不起作用。我能做些什么来将电子邮件链接移到右侧？

问候，乔纳斯

来源

2016-11-20 Jonas

您可以使用nth-child()选择器选择电子邮件的最后一个元素。而下面的代码将电子邮件标签放在菜单的右侧。

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

来源

2016-11-20 22:32:06 acgrdumlu

移动的id="eMail"属性关闭<a>和到父<li>元件，如本li■找浮动对他们的样式被确定内部的a元件的放置。那么float: right;应该就足够了。

来源

2016-11-20 22:17:53

只是这样做：

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

右键，你现在有.menubar li规则后，并删除整个#eMail -rule

来源

2016-11-20 22:33:08 junkfoodjunkie

文字对齐不带浮动用于菜单栏与css

回答

相关问题