Как использовать margin auto в flexbox

Я делаю навигатор. но у меня проблема. Я хочу перенаправить 2 элемента вправо но 1 из них идет вправо 1 из них идет посередине Я не могу использовать float, потому что использую flexbox я ищу в гугле Он говорит использовать маржу авто Я использую маржу авто, но один из них идет посередине Я хочу, чтобы они оба шли правильно с небольшим запасом между ними (ссылка и контакты)

мой HTML-код:

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>try making site</title>
    <link rel = "stylesheet" href = "style.css">
    <link rel = "stylesheet" href = "node_modules/@fortawesome/fontawesome-free/css/all.css">

</head>

<body>
    <nav>
        <ul>
            <li class = "active"><a href = "#"> Home </a></li>
            <li>
                <a href = "#">projects <i class = "fas fa-caret-down"></i></a>
                <ul>
                    <li><a href = "#">open source</a></li>
                    <li><a href = "#">close source</a></li>
                </ul>
            </li>
            <li><a href = "#"> CV </a></li>
            <li class = "f-right"><a href = "#"> Contacts </a></li>
            <li class = "f-right"><a href = "#">links</a></li>
        </ul>
    </nav>



    <script src = "node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
</body>

</html>

мой код CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background: #F8F8F8;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

nav > ul > li {
    padding: 20px 20px;
    position: relative;
}
nav > ul > li > a{
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
}

nav > ul > li > a:hover {
    color: #333;
}

nav > ul > .active > a{
    color: #555;
}
nav > ul > .active{
    background: #D5D5D5;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 4.2vh;
    left: 0px;
    width: 103%;
    text-align: center;
}
nav > ul > li:hover > ul, nav >ul > li > ul:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav > ul > li > ul > li > a {
    text-decoration: none;
    font-family: sans-serif;
    color: #777;
}

nav > ul > li > ul > li > a:hover {
    color: #333;

}

nav > ul > li > ul > li {
    padding: 1vh 0.75vh;
    background: #F8F8F8;
}
.f-right {
    margin-left: auto;
    margin-right: 20px;
}

контакты идут посередине, но я хочу, чтобы контакт шел прямо, как ссылка (с небольшим запасом) Спасибо !!

оправдать-контент: гибкий-конец?

— 16.12.2020 07:27

html css flexbox navbar nav

16.12.2020 07:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

199

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если я вас правильно понял, попробуйте что-то вроде этого:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background: #F8F8F8;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

nav > ul > li, nav > ul > div > li {
    padding: 20px 20px;
    position: relative;
}
nav > ul > li > a, nav > ul > div > li > a {
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
}

nav > ul > li > a:hover {
    color: #333;
}

nav > ul > .active > a{
    color: #555;
}
nav > ul > .active{
    background: #D5D5D5;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 4.2vh;
    left: 0px;
    width: 103%;
    text-align: center;
}
nav > ul > li:hover > ul, nav >ul > li > ul:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav > ul > li > ul > li > a {
    text-decoration: none;
    font-family: sans-serif;
    color: #777;
}

nav > ul > li > ul > li > a:hover {
    color: #333;

}

nav > ul > li > ul > li {
    padding: 1vh 0.75vh;
    background: #F8F8F8;
}
.f-right {
    display: flex;
    margin-left: auto;
    margin-right: 20px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>try making site</title>
    <link rel = "stylesheet" href = "style.css">
    <link rel = "stylesheet" href = "node_modules/@fortawesome/fontawesome-free/css/all.css">

</head>

<body>
    <nav>
        <ul>
            <li class = "active"><a href = "#"> Home </a></li>
            <li>
                <a href = "#">projects <i class = "fas fa-caret-down"></i></a>
                <ul>
                    <li><a href = "#">open source</a></li>
                    <li><a href = "#">close source</a></li>
                </ul>
            </li>
            <li><a href = "#"> CV </a></li>
            <div class = "f-right">
              <li><a href = "#">Contacts</a></li>
              <li><a href = "#">links</a></li>
            </div>
        </ul>
    </nav>



    <script src = "node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
</body>

</html>

16.12.2020 07:30

Оберните элементы панели навигации, которые вы хотите переместить вправо, в их собственный контейнер, в данном случае UL с class f-right

<ul class = "f-right">
    <li><a href = "#"> Contacts </a></li>
    <li><a href = "#">links</a></li>
</ul>

И добавьте следующий CSS, который придаст контейнеру гибкий макет и выровняет его элементы справа.

.f-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    list-style: none;
    display: flex;
}

.f-right > li {
    padding: 20px 20px;
}

.f-right > li > a {
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
 }

16.12.2020 07:41

Другие вопросы по теме

Как веб-сайты конструктора шаблонов сохраняют пользовательские изменения, а затем показывают их другим пользователям?

Класс столбца Bootstrap не соответствует полям или классу жидкости контейнера

HTML CSS изображение растет

Получить реальное смещение при нажатии на изменение размера изображения

Наведение на div "прямоугольник" не работает

Выпадающее меню CSS не открывается при первом нажатии

Изменить состояние в элементе

Более короткий способ сделать div отзывчивым

Как сделать кнопки в одной строке при изменении размера окна

Расширить текстовое поле в зависимости от размера его содержимого

Как использовать margin auto в flexbox

Ответы 2

Другие вопросы по теме

Похожие вопросы