html - CSS border-bottom getting space between elements -
i working on sidebar, have 'a' elements inside 'li's, applying css code on them, , giving them border. when apply border-bottom on 'a' elements, space between elements effected. how can remove space between them? thanks.
sidebar image link: http://imgur.com/gntsanx
code [html] :
<div id="container"> <div class="sidebar"> <ul id="nav"> <li><a href="#" class="selected">dashboard</li> <li><a href="#">booter hub</li> <li><a href="#">stresser</li> <li><a href="#">friends</li> <li><a href="#">search</li> <li><a href="#">purchase</li> </ul> </div> <div class="content">
code [css] :
ul#nav li { color: #ccc; display: block; padding: 10px; font-size: 0.8em; border-bottom: 1px solid #0a0a0a; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s
}
first thing.. close a
tag...
<li><a href="#" class="selected">dashboard</a></li>
once have done following result (i have removed ul
list-style
, margin
, padding
, assuming have done same in other code not shared in question)...
ul { list-style: none; padding: 0; margin: 0; } #nav li { border: 1px solid pink; } #nav li { text-decoration: none; color: #ccc; display: block; padding: 10px; font-size: 0.8em; border-bottom: 1px solid #0a0a0a; }
<div id="container"> <div class="sidebar"> <ul id="nav"> <li><a href="#" class="selected">dashboard</a></li> <li><a href="#">booter hub</a></li> <li><a href="#">stresser</a></li> <li><a href="#">friends</a></li> <li><a href="#">search</a></li> <li><a href="#">purchase</a></li> </ul> </div> <div class="content">
*remember add text-decoration: none;
remove default a
tag underline.
Comments
Post a Comment