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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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