You are using inline-block on your li tags. What you need to do is apply float:left; and display:block; . Then apply a clearfix to the UL. Inline-block treats elements similar to how text is handled and includes line-height and spaces.
Styling Full Hover Effect
-
10-06-2023 - |
Domanda
I want a css hover effect to last on all sections of a particular list item but it seems like there is added margins on the bottom and left and right of the list item that I can't seem to get rid off. I know this is probably a pretty basic css question but I have a JSFiddle here: http://jsfiddle.net/y2497/
I was using bootstrap to get my base css but I don't think that is affecting it.
My Code is:
#navbar {
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav_container li {
list-style-type: none;
display: inline-block;
margin: 0px 20px 0px 20px;
}
#nav_container li:hover {
background: #333;
}
#nav_container li a {
display: inline-block;
color: #00;
padding: 10px;
}
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="nav_container">
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
Soluzione
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow