изменить направление элементов навигации - PullRequest
Новая
       0

изменить направление элементов навигации

1 голос
/ 13 апреля 2020

Пытался перевернуть навигационную панель, которая включает в себя lo go, элементы навигации и социальные иконки (слева направо), чтобы они были справа налево. Я использовал float: right, а также direction: rtl. Однако lo go остается справа как есть, элементы nav меняют направление справа налево, значки социальных сетей также меняются справа налево, но элемент div, содержащий значок социальных сетей, остается. слева.

То, чего я хочу достичь: перевернуть панель навигации, чтобы она была lo go, элементы навигации, значки социальных сетей (справа налево).

Вот мой код: 

<div class="container ">
    <div class="row">

        <div class="col-lg-1 col-sm-1">
            <div class="logo">
                <a href="index.html"><img src="../images/logo.png" alt=""></a>
            </div>
        </div>

        <div class="col-md-7 " >
            <nav class="mainNav2">
                <div class="mobileMenu2">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul >
                    <li class="has-menu-items">ABOUT US
                        <ul class="sub-menu">
                            <li>HISTORY</li>
                            <li>ORGANIZATION</li>
                        </ul>
                    </li>

                    <li class="has-menu-items">MEDIA
                        <ul class="sub-menu">
                            <li>PHOTO GALLERY</li>
                            <li>VIDEOS</li>
                        </ul>
                    </li>

                    <li class="has-menu-items">DOWNLOADS</li>
                </ul>
            </nav>
        </div>

        <div class="col-lg-3 col-sm-3">
            <div class="socialIcon">
                <a class="fb" href="#" title="facebook"><i class="fa fa-facebook"></i></a>
                <a class="ig" href="https://www.instagram.com/ title="instagram"><i class="fa fa-instagram"></i></a>
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 13 апреля 2020

Я немного боролся с пониманием вашего вопроса, однако самый простой способ выровнять элементы - это использовать flexbox, я предлагаю вам взглянуть по этой ссылке:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Также этот результат, который я получил, легко может быть расширен на

enter image description here

ваш html имеет много ненужных div и классов, было бы проще, если бы вы назвали классы соответственно. 

/*logo, nav items, social icons*/
a {
  color: lime;
}

.container {
  background: #333;
  color: white;


  display: flex;

  flex-wrap: no-wrap;
  border: 5px solid orange;
}

.logo {
  border: 2px solid cyan;

}

.navItems {
  border: 2px solid lime;
  
}

.socialIcon {
  border: 2px solid yellow;

}
<!DOCTYPE html>

<html lang="en" dir="ltr">
<link rel="stylesheet" href="master.css">

<div class="container">


            <div class="logo">
                <a href="index.html">IMG HERE</a>
            </div>

        <div class="navItems">

                  <div class="mobileMenu2">
                      <span></span>
                      <span></span>
                      <span></span>
                  </div>
                    <ul >
                        <li class="has-menu-items">ABOUT US
                            <ul class="sub-menu">
                                <li>HISTORY</li>
                                <li>ORGANIZATION</li>
                            </ul>
                        </li>
                        <li class="has-menu-items">MEDIA
                            <ul class="sub-menu">
                                <li>PHOTO GALLERY</li>
                                <li>VIDEOS</li>
                            </ul>
                        </li>
                        <li class="has-menu-items">DOWNLOADS</li>
                    </ul>
      </div>


            <div class="socialIcon">
                <a class="fb" href="#" title="facebook">FB LOGO HERE</a>
                <a class="ig" href="https://www.instagram.com/ title="instagram">IG LOGO HERE</a>
            </div>
    </div>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...