CSS - как выровнять по вертикали разделенную навигационную панель (левый и правый плавающие значки) И смешанные блочные / встроенные элементы

Question

Это похоже на другие опубликованные вопросы, но немного более конкретно c.

Моя цель - создать разделенную навигационную панель, используя CSS (чистый или bootstrap), с логином и кнопки регистрации выровнены по правому краю и другие кнопки по левому краю. На экранах XL у меня кнопки входа и регистрации меняются со встроенного блока на блок-дисплей, что заставляет их занимать две строки в каждой. Каждый состоит из шрифта и иконки. С этим простым изменением у меня много проблем с вертикальным выравниванием других кнопок. Кнопки блока расположены по центру в навигационной панели, но остальные расположены слишком высоко.

У всех решений на основе flexbox был побочный эффект удаления выравнивания по правому краю кнопок входа и регистрации. Это включает в себя любые классы bootstrap, такие как d-flex, с добавлением любых свойств выравнивания в файл css.

Я мог бы изменить дизайн панели навигации, чтобы элементы, выровненные по правому краю, находились на дополнительной панели навигации, как в решении здесь: bootstrap navbar, плавающий влево и вправо , но мне довольно любопытно решить / понять эту проблему (и иметь возможность реализовать это самым простым способом).

Вот как у меня есть структура html:

  <div class="container-fluid">
    <div class="row no-gutters flex-row">
            <ul class="">
                <li class=""> <a href="#">Map</a></li>
                ...
                <li class="dropdown">
                    ...
                </li>
                <li class="nav navbar-right " id="signup-btn">
                    <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span></a>
                </li>
                <li class="nav navbar-right " id="login-btn">
                    <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span></a>
                </li>
            </ul>
    </div>
</div>

Custom CSS для этих элементов:

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  text-align: center;
  padding: .9rem .9rem;
}

#login-btn{
  float: right; !important;
}

#signup-btn {
  float: right; !important;
}

#navbar li {
  vertical-align: center;
}

Как это выглядит:

Если я попытаюсь опубликовать некоторые из опубликованных гибких решений, например, здесь Bootstrap NavBar с выровненными по левому, среднему или правому краю элементами , можно Больше не разбивайте навигационную панель:

Answer 1

это плохой способ решить проблему. Лучше использовать flexbox вместо float.

, например:

<div class="parent-box">
    <div>
        <a href="#">Map</a>
        ...
    </div>
    <div>
        <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span></a>
        <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span></a>
    </div>
</div>

.parent-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Answer 2

Если я правильно понял вашу задачу, вы можете сделать так:

1. Разделите навигацию на 2 блока и переместите их с помощью

   .nav { justify-content: space-between; }

2. Установить высоту блоков равной 100% от родительского

3. Использовать в них «align-items: center»

   .nav__list, .nav__buttons { height: 100%; display: flex; align-items: center; }

Я создал ручку. Я думаю, что это поможет вам. https://codepen.io/dimaaan21/pen/WNvbEvM

Answer 3

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ПРАКТИЧЕСКОЕ ИСПОЛЬЗОВАНИЕ *. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * justify-content-between * * * * * * * *.

<nav class="navbar navbar-dark navbar-expand justify-content-between">
    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="nav-item text-center">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span></a>
            </li>
            <li class="nav-item dropdown text-center">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
                ...
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item text-center" id="signup-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span></a>
            </li>
            <li class="nav-item text-center" id="login-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span></a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/kTGlK9Axdk/left-right

Answer 4

используйте класс text-right для контейнера div - в bootstrap