Выравнивание гиперссылки

Question

Создал сайт на теме TwentyTwenty

Привожу фрагмент файла header.php

                <div class="header-navigation-wrapper">
                        
                        <!-- <?php get_search_form( $echo = true ); ?> -->
                        
                            <div class="kCNgDb">
                                <span class="entrylink">
                                    <a href="<?php echo get_stylesheet_directory_uri() ?>/entry.php">
                                        <span class="eEkWAa">
                                            <img src="<?php echo get_stylesheet_directory_uri() ?>/useentryicon.png">
                                            </img>
                                        </span>
                                        <span class="gxtXIp"><?php echo " " ?>Вход</span>
                                        <span class="bidiEP">|</span>
                                        <span class="jCpPzc"> Регистрация</span>
                                    </a>
                                </span>
                            </div>
                        <?

а также файла стилей styles.css

.kCNgDb {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.eEkWAa, .gxtXIp, .bidiEP, .jCpPzc {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.entrylink{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.header-main-wrapper {
    display: flex;
    justify-content: space-between;
}
    

.header-basket-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

Подскажите как добиться отображения гиперссылки Вход Регистрация вместе с иконкой в одну строку.

Answer 1

У вас внутри класса .entrylink - которым вы хотите задать выравнивание в строку дочерним элементам находится еще один элемент-контейнер , a внутри него уже находятся элементы которые вы хотите выровнять, поэтому и не работает. Чтобы исправить можно сделать, что то типо этого:

.entrylink a {
  display: flex;
}

БЛОГ НА HUSL

Выравнивание гиперссылки

Ответы (1 шт):