0

Как сделать чтобы логотип был на месте, а шапка в правой стороне?

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Questrial', sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.flex-container ul {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  font-size: 20px;
}

.list {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px 15px 0;
}
<header>
  <nav class="flex-container">
    <img class="logo" src="android.png">
    <ul>
      <li><a class="list" href="#">Home</a></li>
      <li><a class="list" href="#">Company</a></li>
      <li><a class="list" href="#">Services</a></li>
      <li><a class="list" href="#">Price</a></li>
      <li><a class="list" href="#">Projects</a></li>
      <li><a class="list" href="#">Order</a></li>
      <li><a class="list" href="#">Contacts</a></li>
    </ul>
  </nav>
</header>

Вроде бы и указал, что flex-container должен быть row, слева направо находится row — строка (значение по умолчанию);

А именно flex-container ul (flex-end) то есть по правую сторону контент должен находиться, но всё равно не получается.

Как сейчас: введите сюда описание изображения

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

2 ответа 2

2

Есть такое свойство justify-content: space-between;

.flex-container { display: flex; justify-content: space-between;}

Если нужно сделать логотип фиксированным слева, а для меню использовать всё оставшееся пространство

.flex-container { display: flex;}
.flex-container > ul {display: flex; flex:1; justify-content: flex-end;}
3
  • И на кой я ответ писал)))))
    – Air
    17 ноя 2018 в 8:49
  • Что такое .flex-container > ul {display: flex; flex:1; justify-content: flex-end;}, почему здесь вы поставили знак больше? Как это работает? 18 ноя 2018 в 12:04
  • @ПетровченкоИван Знак ">" - Синтаксис CSS - дочерний тег ul Так как это меню - то я подумал, что внутри его будут ещё списки 18 ноя 2018 в 15:24
1

Можно так. Задай контейнеру

justify-content: space-between;

* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Questrial', sans-serif;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
}

.flex-container ul {
  display: flex;
  list-style-type: none;
  font-size: 20px;
  margin-right: 50px;
}

.list {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px 15px 0;
}
<header>
  <nav class="flex-container">
    <img class="logo" src="android.png">
    <ul>
      <li><a class="list" href="#">Home</a></li>
      <li><a class="list" href="#">Company</a></li>
      <li><a class="list" href="#">Services</a></li>
      <li><a class="list" href="#">Price</a></li>
      <li><a class="list" href="#">Projects</a></li>
      <li><a class="list" href="#">Order</a></li>
      <li><a class="list" href="#">Contacts</a></li>
    </ul>
  </nav>
</header>

5
  • Объясните почему вы написали: В * {padding: 0, margin: 0}?, а так же почему вы написали в html, body{ ширину 100% и высоту 100%? 18 ноя 2018 в 12:00
  • Что объяснить???
    – Air
    18 ноя 2018 в 12:01
  • А так же что такое *? 18 ноя 2018 в 12:03
  • Потому что, по умолчанию у всех элементов есть padding 4px, margin 4px... Я всегда их сбрасываю... Привычка... А width: 100%; height: 100%; потому что у body по умолчанию height: 0; А у html height: 4px; Так что это привычка
    – Air
    18 ноя 2018 в 12:14
  • Надеюсь внятно объяснил
    – Air
    18 ноя 2018 в 12:17

Ваш ответ

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

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