当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Website Gearwheel is messing up navigation

问题描述:

I have a problem with my website, the problem is I have a horizontal navigation bar with borders to separate each navigation item.

The problem now is when I add a gearwheel (settings symbol) my borderlines aren't right anymore.

Gearwheel is messing up borderlines

here is my code:

HTML<asp:Content ID="content5" ContentPlaceHolderID="master_navigation_hori" runat="server">

<li><a href="test.aspx">Test2</a></li>

<li><a href="test.aspx">Test4</a></li>

<li class="active"><a href="test.aspx">MartinLukasGasse24</a></li>

<li class="floatright"><a href="test.aspx">Gearwheel</a></li>

</asp:Content>

here my css for the navigation:

 #nav_hori{

list-style-type:none;

margin:0;

padding:0;

top: 0;

left:0;

overflow:hidden;

background-color: #333;

position: fixed;

width: 100%;

}

#nav_hori li {

float: left;

border-right: 1px solid #bbb ;

}

#nav_hori li a {

display: block;

color: white;

text-align: center;

padding: 14px 14px;

text-decoration:none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

.floatright{

float:right !important;

}

hope you can help me

Regards

分享给朋友:
您可能感兴趣的文章:
随机阅读: