html - Keeping lists horizontal at all times -


i'm having trouble trying keep list horizontal, haven't been able find anywhere , white-space: nowrap doesn't work. don't mind 4 items being underneath text after screen size it's gotta horizontal still, in case goes vertical , can't figure out why, there's fiddle try out re-sizing , you'll mean!

<div class="menu">     <h2>        text     </h2>      <ul>         <li><a>test1</a></li>         <li><a>test2</a></li>         <li><a>test3</a></li>         <li><a>test4</a></li>      </ul> </div> 

js fiddle

please css or html fixes!

thank you!

h2 {    display: inline;  }    ul {    text-align: right;    margin-right: 100px;    white-space: nowrap;  }    li {    display: inline-block;  }    {    padding: 14px 16px;  }
<div class="menu">      <h2>      text      </h2>      <ul>        <li><a>test1</a></li>        <li><a>test2</a></li>        <li><a>test3</a></li>        <li><a>test4</a></li>      </ul>  </div>

float not friend

just change ul , li styles looks follows:

ul {   margin-right: 100px;   white-space: nowrap;   text-align: right; }  li {   display: inline-block; } 

Comments

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -