首页 > 解决方案 > Flexbox - 菜单项在小屏幕上移动到第二行

问题描述

缩小屏幕尺寸时,菜单项会垂直对齐。我希望它保持水平对齐。证明内容不起作用

问题的图像可以在这里看到。

这是问题的链接:https ://bclinico.helvatica.com/faq/

<div  id="sticky-header-navbar" style="display: flex; align-items: center; height: 80px; margin: auto; justify-content: space-between;">
    <div  class="container ulockd-pdng0" >
   
        <nav class="nav" role="navigation" style="z-index: 999; position: relative; margin: 0; padding: 0;">
            <span style="float: left; font-weight: 600;  margin: 0; padding: 0;">
                 hekim_nav()
                    </span>
            <ul class="ulockd-quote-btn hidden-xs hidden-sm">
                <li><a href="#" class="btn btn-lg ulockd-btn-white"> Get a Quote </a></li>
            </ul>
            <ul>
                <li class="shop-dropdown dropdown inner_page">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white!important;" >
                        <i class="fa fa-shopping-bag"></i>
                        <span class="badge">
                                    global $woocommerce;
                                    echo $woocommerce->cart->cart_contents_count;
                                </span>
                    </a>
                    <ul class="dropdown-menu pull-right cart-list dropdown-menu-right" style="color: white!important;">
                        <li>
                            storefront_header_cart();
                        </li>
                    </ul>
                <li><div class="ddd  search_innerpage fa fa-search " style="margin-top: 5px; color: white!important;"\>
                </li>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- /nav -->

标签: cssflexbox

解决方案


推荐阅读