Мой li плавает влево на большом экране, но когда он находится на очень маленьком экране, li выключается.Как я могу поставить свой li float на меньший экран тоже?

Question

Я делаю навигационную панель.В этой навигационной панели я использовал две li метки.Один из языка, а другой валюты.Когда я уменьшаю размер экрана, я хочу, чтобы теги li плавали влево.Но это идет о другом.Как я могу решить эту проблему.

Также моя кнопка свертывания не расположена в правильном месте.Для этого тоже нужно решение.

Я пробовал с классом float-xs-left, а также css media query.Ни один из них не сработал.

Я хочу, чтобы опция "EN" и "USD" плавали влево на очень маленьком экране, и я также хочу, чтобы опция поиска и общая сумма денег выглядела круто

Answer 1

Один из способов добиться того, о чем вы просили, - это использовать свойство CSS display: flex в родительском элементе тегов li (например, тег ul) в сочетании с flex-wrap: nowrap.Вот пример, который может работать на маленьких экранах:

nav {
  width: 100%;
}

ul {
  width: 100%;
  list-style: none;
  padding: .5em;
  display: flex;
  flex-wrap: nowrap;
  background: slategrey;
}

li {
  margin: .5em;
  padding: 1em;
  background: lightblue;
}

<nav>
  <ul>
    <li>Language: French</li>
    <li>Currency: Euros €</li>
  </ul>
<nav>