Не могу поставить все в один ряд

Рейтинг: 0Ответов: 1Опубликовано: 16.05.2023

body{
    margin: 0;
    padding: 0;
}

.anim{
    width: 100%;
    height: 150px;
    background-color: aqua;

}

nav li{
    display: inline-block;
    margin-right: 20px;
} 
<div class="logo"></div>
<div class="anim">
<nav>
    <ul>
        <li><a>home</a></li>
        <li><a>models</a></li>
    </ul>
    <figure align="center">
        <img src=".png" width="100">
    </figure>
    <ul>
        <li><a>help</a></li>
        <li><a>about</a></li>
    </ul>
</nav>
</div>

Заранее Спасибо

css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вот в таком варианте мы можем дать для нашего nav display: flex и указать justify-content: space-between.
Дальше для ul внутри nav нам тоже нужно задать display: flex и для всего этого задать gap: 20px - что будет отступом между элементами.

Добавлю: Если картинка будет по высоте больше чем меню, будет не очень красиво, если вы хотите выровнять все по центру (по вертикали), то нужно задать align-items: center для nav.

body{
    margin: 0;
    padding: 0;
}

.anim{
    width: 100%;
    height: 150px;
    background-color: aqua;
}

nav
{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

nav ul
{
  display: flex;
  gap: 20px;
}
<div class="logo"></div>
<div class="anim">
  <nav>
      <ul>
          <li><a>home</a></li>
          <li><a>models</a></li>
      </ul>
      <figure align="center">
          <img src=".png" width="100">
      </figure>
      <ul>
          <li><a>help</a></li>
          <li><a>about</a></li>
      </ul>
  </nav>
</div>