0

введите сюда описание изображения

Помогите пожалуйста,нужно как то иконку айфона поставить перед словом "Магазин",а лупу после слова "Поддержка".Буду очень благодарен

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  background-color: rgb(70, 67, 68);
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}

.nav-list a {
  display: block;
  padding: 1em;
  text-decoration: none;
  color: white;
}

.navbar>img {
  width: 19px;
  height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iphone</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="static/styles/style.css">
</head>
<body>
   <div class="navbar">
    <img src="https://cdn-icons-png.flaticon.com/512/0/747.png" alt="">
    <div class="nav-list">
    <a href="#">Магазин</a>
    <a href="#">Mac</a>
    <a href="#">Ipad</a>
    <a href="#">Iphone</a>
    <a href="#">Watch</a>
    <a href="#">AirPods</a>
    <a href="#">TV и Дом</a>
    <a href="#">Только в Apple</a>
    <a href="#">Аксессуары</a>
    <a href="#">Поддержка</a>
    </div>
    <div class="lupa">
        <i class='fa-solid fa-magnifying-glass' style='color:#ffffff'></i>
    </div>
   </div>
   
</body>
</html>

3
  • .navbar { justify-content: center; } . Убрать => .nav-list { margin: 0 auto; }
    – Dias
    9 мар в 20:42
  • Вы каждый шаг спрашивать? Изучите основы для начла. 10 мар в 4:04
  • Да,почему бы и нет
    – Bebrik
    10 мар в 7:17

1 ответ 1

0

Примерно так это делается, Объяснять то, что и так понятно не имеет смысла думаю.

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  background-color: rgb(70, 67, 68);
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  list-style: none;
}
.nav-list li {
  
}
.nav-list a {
  display: flex;
  align-items: center;
  column-gap: 5px;
  padding: 1em;
  text-decoration: none;
  color: white;
}

.navbar img {
  min-width: 19px;
  height:auto;
  width: 19px;
  height: auto;
}
<div class="navbar">
  <ul class="nav-list">
    <li><a href="#"><img src="https://cdn-icons-png.flaticon.com/512/0/747.png" alt="">Магазин</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">Ipad</a></li>
    <li><a href="#">Iphone</a></li>
    <li><a href="#">Watch</a></li>
    <li><a href="#">AirPods</a></li>
    <li><a href="#">TV и Дом</a></li>
    <li><a href="#">Только в Apple</a></li>
    <li><a href="#">Аксессуары</a></li>
    <li><a href="#">Поддержка<i class='fa-solid fa-magnifying-glass' style='color:#ffffff'></i></a></li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.