html - 如何将页脚中的菜单向右移动？

问题描述

我在尝试将菜单移动到页面右侧时遇到问题。我尝试使用 float:right 但它改变了菜单的顺序，我一直在尝试添加一个 flex 端但似乎不起作用，不确定我是否调用了错误的元素。

如果您查看下面的屏幕截图，我希望将 4 个页脚菜单（帐户、商店、关于和咖啡师咖啡）移动到此页脚的右侧。具有徽标、社交图标和地址的列应保留在原处。我该如何移动它？

截屏：

HTML（我评论了四个菜单的位置 - 请参阅右移评论）：

footer [id*=nav_menu] {
  width: auto;
  float: right; /*this moves it to the right but changes the order and messes up with the pay icons underneath*/
}

aside#text-4 .textwidget,
footer [class*=menu] ul,
footer [id*=nav_menu] .widget_title {
  display: inline-block;
  text-align: left;
}

<footer class="footer_wrap widget_area scheme_original">

  <div class="footer_wrap_inner widget_area_inner">
    <aside id="text-4" class="widget_number_9 column-1_5 widget widget_text">
      <div class="textwidget">
        <div class="logofooteri"><img src="https://balancecoffee.co.uk/stage/wp-content/uploads/2021/04/123d.png"></div>
        <div class="socialfooter" style="display: inline-block;">
          <p>
            <a style="margin-right: 12px;" href="https://www.instagram.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Instagramwhite.svg" width="30px" height="30px"></a>
          </p>
          <p>
            <a style="margin-right: 12px;" href="https://www.facebook.com/balancecoffee20" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Facebookwhite.svg" width="29px" height="29px"></a>
          </p>
          <p>
            <a style="margin-right: 12px;" href="https://twitter.com/BalanceCoffeeUK" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Twitterwhite.svg" width="30px" height="30px"></a>
          </p>
          <p>
            <a style="margin-right: 12px;" href="https://www.pinterest.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Pinterestwhite.svg" width="30px" height="30px"></a>
          </p>
        </div>
        <div class="footer-address">Kemp House, 152-160 City Road,<br> London, EC1V 2NX</div>
        <div class="footer-address">info@balancecoffee.co.uk</div>
      </div>

      <!-- Shift to the right -->

    </aside>
    <aside id="nav_menu-6" class="widget_number_10 column-1_5 widget widget_nav_menu">
      <h5 class="widget_title">ACCOUNT</h5>
      <div class="menu-account-footer-container">
        <ul id="menu-account-footer-1" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7970"><a href="https://balancecoffee.co.uk/stage/?page_id=285">Sign In</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7971"><a href="https://balancecoffee.co.uk/stage/?page_id=6089">Earn Rewards</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7968"><a href="https://balancecoffee.co.uk/stage/?page_id=4561">Manage Subscription</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7969"><a href="https://balancecoffee.co.uk/stage/?page_id=1109">FAQs</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7967"><a href="https://balancecoffee.co.uk/stage/?page_id=1032">Contact</a></li>
        </ul>
      </div>
    </aside>
    <aside id="nav_menu-7" class="widget_number_11 column-1_5 widget widget_nav_menu">
      <h5 class="widget_title">SHOP</h5>
      <div class="menu-shop-footer-container">
        <ul id="menu-shop-footer-1" class="menu">
          <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7995"><a href="https://balancecoffee.co.uk/stage/?cat=69">Coffee</a></li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7978"><a href="https://balancecoffee.co.uk/stage/?product_cat=subscription-coffee">Subscription Coffee</a></li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7980"><a href="https://balancecoffee.co.uk/stage/?product_cat=coffee-equipment">Coffee Equipment</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7989"><a href="https://balancecoffee.co.uk/stage/?page_id=4757">Sage Coffee Machines</a></li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7979"><a href="https://balancecoffee.co.uk/stage/?product_cat=oat-milk-coffee-bundles">Oat Milk</a></li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7985"><a href="https://balancecoffee.co.uk/stage/?product_cat=coffee-gifts">Coffee Gifts</a></li>
        </ul>
      </div>
    </aside>
    <aside id="nav_menu-8" class="widget_number_12 column-1_5 widget widget_nav_menu">
      <h5 class="widget_title">ABOUT</h5>
      <div class="menu-about-footer-menu-container">
        <ul id="menu-about-footer-menu-1" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8015"><a href="https://balancecoffee.co.uk/stage/?page_id=1012">Our Story</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8038"><a href="https://balancecoffee.co.uk/stage/?page_id=1054">Sustainability</a></li>
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8041"><a href="/">Press</a></li>
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8042"><a href="/">Become an Affiliate</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8043"><a href="https://balancecoffee.co.uk/stage/?page_id=2410">Become a Stocklist</a></li>
        </ul>
      </div>
    </aside>
    <aside id="nav_menu-9" class="widget_number_13 column-1_5 widget widget_nav_menu">
      <h5 class="widget_title">BARISTA SCHOOL</h5>
      <div class="menu-barista-school-footer-menu-container">
        <ul id="menu-barista-school-footer-menu-1" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8035"><a href="https://balancecoffee.co.uk/stage/?page_id=3249">Coffee Blog</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8032"><a href="https://balancecoffee.co.uk/stage/?page_id=4757">Sage Coffee Machines</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8031"><a href="https://balancecoffee.co.uk/stage/?page_id=3238">Coffee Videos</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8033"><a href="https://balancecoffee.co.uk/stage/?page_id=3241">Coffee Recipes</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8034"><a href="https://balancecoffee.co.uk/stage/?page_id=3252">Tips &amp; Hacks</a></li>


      </div>
      <!-- /.columns_wrap -->

  </div>
</footer>

标签： htmlcss

解决方案

您可以通过以下方式实现display: flex此justify-content: flex-end目的.footer_wrap_inner：

.footer_wrap_inner {
  display: flex;
  justify-content: flex-end;
}

要获得左侧asideid的第一个，text-4您可以简单地使用margin-rigth: auto：

aside#text-4 {
  margin-right: auto;
}

工作示例：（带有一些额外的 css 以获得更好的可见性）

顺便说一句，p阻止.socialfooter图标像屏幕截图一样内联显示 - 所以我删除了它们。我还将标题从更改为h5从h3屏幕截图中查看。

* {
  color: white;
}

.footer_wrap_inner {
  display: flex;
  justify-content: flex-end;
  background-color: #000;
}

a {
  text-decoration: none;
}

.logofooteri img {
  width: 180px;
}

footer [id*=nav_menu] {
  width: auto;
}

aside#text-4 .textwidget>div {
  margin: 20px 0;
}

aside#text-4 {
  margin-right: auto;
}

aside#text-4 .textwidget,
footer [class*=menu] ul,
footer [id*=nav_menu] .widget_title,
.socialfooter {
  text-align: left;
}

aside#text-4 a {
  margin-right: 12px;
}

ul {
  list-style: none;
  padding: 0;
  margin-right: 12px;
}

li {
  margin: 10px 0;
}

<footer class="footer_wrap widget_area scheme_original">

  <div class="footer_wrap_inner widget_area_inner">
    <aside id="text-4" class="widget_number_9 column-1_5 widget widget_text">
      <div class="textwidget">
        <div class="logofooteri">
          <img src="https://balancecoffee.co.uk/stage/wp-content/uploads/2021/04/123d.png">
        </div>
        <div class="socialfooter">
          <a href="https://www.instagram.com/balancecoffee" target="_blank" rel="noopener nofollow">
            <img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Instagramwhite.svg" width="30px" height="30px">
          </a>
          <a href="https://www.facebook.com/balancecoffee20" target="_blank" rel="noopener nofollow">
            <img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Facebookwhite.svg" width="29px" height="29px">
          </a>
          <a href="https://twitter.com/BalanceCoffeeUK" target="_blank" rel="noopener nofollow">
            <img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Twitterwhite.svg" width="30px" height="30px">
          </a>
          <a href="https://www.pinterest.com/balancecoffee" target="_blank" rel="noopener nofollow">
            <img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Pinterestwhite.svg" width="30px" height="30px">
          </a>
        </div>
        <div class="footer-address">Kemp House, 152-160 City Road,<br> London, EC1V 2NX</div>
        <div class="footer-address">info@balancecoffee.co.uk</div>
      </div>
    </aside>

      <!--***** Shift to the right **********-->
      
    <aside id="nav_menu-6" class="widget_number_10 column-1_5 widget widget_nav_menu">
      <h3 class="widget_title">ACCOUNT</h5>
      <div class="menu-account-footer-container">
        <ul id="menu-account-footer-1" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7970">
            <a href="https://balancecoffee.co.uk/stage/?page_id=285">Sign In</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7971">
            <a href="https://balancecoffee.co.uk/stage/?page_id=6089">Earn Rewards</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7968">
            <a href="https://balancecoffee.co.uk/stage/?page_id=4561">Manage Subscription</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7969">
            <a href="https://balancecoffee.co.uk/stage/?page_id=1109">FAQs</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7967">
            <a href="https://balancecoffee.co.uk/stage/?page_id=1032">Contact</a>
          </li>
        </ul>
      </div>
    </aside>
    
    <aside id="nav_menu-7" class="widget_number_11 column-1_5 widget widget_nav_menu">
      <h3 class="widget_title">SHOP</h5>
      <div class="menu-shop-footer-container">
        <ul id="menu-shop-footer-1" class="menu">
          <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7995">
            <a href="https://balancecoffee.co.uk/stage/?cat=69">Coffee</a>
          </li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7978">
            <a href="https://balancecoffee.co.uk/stage/?product_cat=subscription-coffee">Subscription Coffee</a>
          </li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7980">
            <a href="https://balancecoffee.co.uk/stage/?product_cat=coffee-equipment">Coffee Equipment</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7989">
            <a href="https://balancecoffee.co.uk/stage/?page_id=4757">Sage Coffee Machines</a>
          </li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7979">
            <a href="https://balancecoffee.co.uk/stage/?product_cat=oat-milk-coffee-bundles">Oat Milk</a>
          </li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-7985">
            <a href="https://balancecoffee.co.uk/stage/?product_cat=coffee-gifts">Coffee Gifts</a>
          </li>
        </ul>
      </div>
    </aside>
    
    <aside id="nav_menu-8" class="widget_number_12 column-1_5 widget widget_nav_menu">
      <h3 class="widget_title">ABOUT</h5>
      <div class="menu-about-footer-menu-container">
        <ul id="menu-about-footer-menu-1" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8015">
            <a href="https://balancecoffee.co.uk/stage/?page_id=1012">Our Story</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8038">
            <a href="https://balancecoffee.co.uk/stage/?page_id=1054">Sustainability</a>
          </li>
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8041">
            <a href="/">Press</a>
          </li>
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8042">
            <a href="/">Become an Affiliate</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8043">
            <a href="https://balancecoffee.co.uk/stage/?page_id=2410">Become a Stocklist</a>
          </li>
        </ul>
      </div>
    </aside>
    
    <aside id="nav_menu-9" class="widget_number_13 column-1_5 widget widget_nav_menu">
      <h3 class="widget_title">BARISTA SCHOOL</h5>
      <div class="menu-barista-school-footer-menu-container">
        <ul id="menu-barista-school-footer-menu-1" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8035">
            <a href="https://balancecoffee.co.uk/stage/?page_id=3249">Coffee Blog</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8032">
            <a href="https://balancecoffee.co.uk/stage/?page_id=4757">Sage Coffee Machines</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8031">
            <a href="https://balancecoffee.co.uk/stage/?page_id=3238">Coffee Videos</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8033">
            <a href="https://balancecoffee.co.uk/stage/?page_id=3241">Coffee Recipes</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8034">
            <a href="https://balancecoffee.co.uk/stage/?page_id=3252">Tips &amp; Hacks</a>
          </li>
        </ul>
      </div>
      <!-- /.columns_wrap -->
    </aside>
  </div>
</footer>

html - 如何将页脚中的菜单向右移动？

问题描述

解决方案

推荐阅读