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

Question

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

如果您查看下面的屏幕截图，我希望将 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>

Answer 1

您可以使用display: flex和justify-content: flex-end来实现.footer_wrap_inner ：

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

为了得到第aside用id text-4到左边，你可以简单地使用margin-rigth: auto ：

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

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

顺便说一下， .socialfooter的p标签阻止图标像您的屏幕截图一样内联显示 - 所以我删除了它们。 我还将标题从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>

Answer 2

https://jsfiddle.net/59kor2Ls/

您的 HTML 对初学者无效，但是这个小提琴实际上是您开始这种布局所需的全部内容。

 .footer_wrap_inner { display: flex; }

 <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> </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> </ul> </div> </aside> <!-- /.columns_wrap --> </div> </footer>

Answer 3

这是一个干净的代码，没有不必要的代码。 这个想法是使用 flexbox 在容器中排列项目。

• 我们有页脚，它是一个容器，里面有两个容器。 里面的容器之间有空间，即justify-content: space-between; .
• 第二个子容器里面还有四个容器。

代码：代码笔