Как сделать тег <li>рядом друг с другом?

Question

В любом случае, я новичок в программировании. Я пытаюсь сделать тег li рядом друг с другом. Это вроде работает, но я на 99% уверен, что мой код немного неправильный.

Это должно выглядеть так:

Navbar-text

КОД:

HTML / CSS код

jsfiddle.net / gn7hczrj

Answer 1

Хочешь этого?

ul li {
  list-style:none;
  display:inline-block;
  background:yellow;
  border:1px solid #333;
}

<ul>
  <li>Orange</li>
  <li>Banana</li>
  <li>Apple</li>
</ul>

Answer 2

Сделайте свой li как встроенный блок

li { 
   display: inline-block;
}

Answer 3

Вы можете установить для элементов li значение 'display: inline-block'