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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -