Мне нужен простой css код для панели навигации

Question

Мне просто нужна простая навигационная панель с CSS.

Я использовал div, чтобы я мог организовать свой код, и я застрял, чтобы сделать правый div в правом и левом div слева.

Пожалуйста, кто-нибудь может мне помочь?

<div class="nav">
            <div class="navleft">
                <span>All jobs</span>
                <span><input type="button" value="change jobs" id="btn"></span>
            </div>
            <div class="navright">
                <select>
                    <option>All Time</option>
                    <option>this time</option>
                    <option>everytime</option>
                </select>
            </div> 
        </div>

Answer 1

Проще говоря, вы можете добавить следующий код к вашему .nav, классифицированному <div>

Затем вы можете использовать этот стиль в вашем css файле

.nav {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}

Это должно дать вам желаемый результат. Я также добавил некоторые отступы в навигацию, чтобы элементы не прилипали к краям.

Если вы заинтересованы в улучшении вашего кода, я бы предложил изменить ваш HTML, чтобы лучше соответствовать роли каждого из них. элемент, который вы используете. Вот пример того, как вы можете изменить его

<nav>
  <ul class="navleft">
    <li>All jobs</li>
    <li><input type="button" value="change jobs" id="btn"></li>
  </ul>
  <ul class="navright">
    <select>
      <option>All Time</option>
      <option>this time</option>
      <option>everytime</option>
    </select>
  </ul>
</nav>

Answer 2

Вы можете использовать этот CSS код, он может решить проблему

.nav{
  display:flex;
}
.navright{
  margin-left:auto
}