Keeping lists horizontal at all times

Question

I'm having some trouble trying to keep a list horizontal, I haven't been able to find it anywhere and white-space: nowrap doesn't work. I don't mind the 4 items being underneath the text after a certain screen size but it's gotta be horizontal still, in this case it goes vertical and I can't figure out why, there's my fiddle try out yourself by re-sizing and you'll what I mean!

<div class="menu">
    <h2>
       This is a 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 only css or html fixes!

Thank you!

Answer 1

h2 {
  display: inline;
}

ul {
  text-align: right;
  margin-right: 100px;
  white-space: nowrap;
}

li {
  display: inline-block;
}

a {
  padding: 14px 16px;
}

<div class="menu">
    <h2>
    This is a 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 is not your friend

Just change your ul and li styles to looks as follows:

ul {
  margin-right: 100px;
  white-space: nowrap;
  text-align: right;
}

li {
  display: inline-block;
}