如何扩大下拉菜单的大小

Question

我的 Wordpress 网站上有一个下拉菜单，但是当我在桌面分辨率下展开它时，它没有在文字旁边显示超棒的 fa fa 图标，而且它没有显示整个菜单。

如何让它更宽更长，以便我的所有内容都可见？

HTML代码：

<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
    <i class="fa fa-bars"></i>
</div>

<div class="module-group right">
    <div class="module left">
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="menu" class="menu">
                <li id="menu-item-1496" class="menu-item 
                                               menu-item-type-post_type 
                                               menu-item-object-page 
                                               menu-item-home 
                                               current-menu-item 
                                               page_item 
                                               page-item-19 
                                               current_page_item
                                               menu-item-has-children 
                                               menu-item-1496 
                                               dropdown 
                                               active">
                    <a title="Home" href="https://adsler.co.uk/">Home </a>.
                    <span class="dropdown-toggle shapely-dropdown" data- toggle="dropdown">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                    </span>
                    <ul role="menu" class=" dropdown-menu">
                        <li id="menu-item-1499" class="fa fa-envelope menu-item menu-item-type-post_type menu-item-object-page menu-item-1499">
                            <a title="Post an Ad" href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-place-ad/">Post an Ad</a>
                        </li>

Answer 1

查看您的网站，我注意到菜单项具有以下内容 HTML：

<li id="menu-item-1502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1502">
<i class="fa fa-user"></i> <a title="Create Adsler Account" href="https://adsler.co.uk/create-account/">Create Adsler Account</a>
</li>

我不知道其中有多少是你的，还有什么来自 WP（我不使用它，恐怕）。我对其进行了编辑并且有效：

<li id="menu-item-1502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1502">
<a title="Create Adsler Account" href="https://adsler.co.uk/create-account/"><i class="fa fa-user fa-fw">&nbsp;</i>Create Adsler Account</a>
</li>

基本上，我为 FA 图标使用了一个单独的 i-标签，并应用了 -class。我将图标移到 a-tag 内，避免了换行符。如果您可以控制菜单以便以这种方式进行调整，它应该可以工作...

如何扩大下拉菜单的大小

How to expand the size of a dropdown menu

html

css

font-awesome