改变导航项目的方向答案

【问题标题】：change direction of nav items改变导航项目的方向
【发布时间】：2020-04-13 06:42:51
【问题描述】：

一直在尝试反转包含徽标、导航项和社交图标（从左到右）的导航栏，使其从右到左。我用过 float:right 和 direction:rtl 但是，logo 保持原样，导航项从右向左改变方向，社交图标也从右向左改变，但包含社交图标的 div 保持在左侧。

我想要实现的是：翻转导航栏，使其成为徽标、导航项、社交图标（从右到左）。

这是我的代码：

<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>

【问题讨论】：

标签： html css

【解决方案1】：

我有点难以理解你的问题，但是对齐项目最简单的方法是使用弹性框，我建议你看看这个链接：

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

这也是我得到的结果，可以很容易地扩展

您的 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>

【讨论】：