html - Some div inside the li is breaking everything -
nav { border-bottom: 4px solid #888; } nav ul { margin: 0; padding: 0; border: 0; list-style-type: none; background-color: #fff; } nav ul li { display: inline; } nav ul { text-decoration: none; color: #000; } nav ul li span { margin-bottom: 20em; } .menustrap { background-color: #000; height: 5px; } <nav> <ul> <a href="#"> <li> <span>something</span> <div class="menustrap"></div> </li> </a> <a href="#"> <li> <span>somethinga</span> </li> </a> <a href="#"> <li> <span>somethinge</span> </li> </a> <a href="#"> <li> <span>somethingi</span> </li> </a> </ul> </nav>
like here: https://jsfiddle.net/nnhfql2l/
i want black div inside li work responsively being same width inside. in other words, should same width "something" text , don't break other things it's not , it's breaking inlining.
i have second doubt if answer i'd glad!: why margin isn't working in bottom , top inside element of ul? there's way don't occur? thanks!
the <a>
element isn't legit child <ul>
. move link inside of <li>
instead.
additionally, <li>
have display: inline
sure cause different kinds of issues when there children nested inside of them. set block
or inline-block
instead.
lastly, margin
shouldn't applied inline
elements. includes <span>
. shouldn't applied children, instead placed on sibling elements want gutters between, in case <li>
.
Comments
Post a Comment