Wordpress 主菜单对齐

Question

我正在学习 css 并尝试做一个 wordpress。我按照建议做了一个儿童主题，并致力于实施。 我的菜单对齐有问题；主菜单实际上在左侧。我想把它放在右边。我知道我可以使用二级菜单，但我的问题只是了解如何通过 css 修改 wordpress :)

模板是雷克雅未克。

我在 style.css 子文件夹中尝试了不同的解决方案，例如：

.main-navigation { margin: auto; }

放大主导航区，然后下一步

.main-navigation-container ul { float: right; }

将菜单放在屏幕右侧但没有任何效果... 也被证明可以在填充上工作，但没有任何改变..

你能告诉我我做错了什么吗？

感谢您的帮助，

杰瑞

编辑：

`

    <button id="menu-toggle" class="menu-toggle" aria-controls="menu-primary" aria-expanded="true">Menu</button>

    <div id="site-navigation-container" class="main-navigation-container">
    <div class="mobile-search-form"><form role="search" method="get" class="search-form" action="http://localhost:8888/wordpress/">
            <label>
                <span class="screen-reader-text">Rechercher&nbsp;:</span>
                <input type="search" class="search-field" placeholder="Recherche…" value="" name="s">
            </label>
            <input type="submit" class="search-submit" value="Rechercher">
        </form></div><div class="menu"><ul id="menu-primary" class="menu-primary" aria-expanded="true"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://localhost:8888/wordpress/" aria-current="page">Accueil</a></li>

Page test 跳到菜单切换按钮

`

Answer 1

添加宽度属性，在这种情况下它应该向右移动。因为目前导航 div 的宽度是 100%，所以它没有地方可以移动。

Answer 2

好的，我找到了一个解决方案，这不是我想的最好的方法，但已经解决了。 它是设置：

.main-navigation { position: relative; margin: auto; margin-right: 0px; }

因为将宽度设置为 100%，它会越过徽标（示例中为 test）。

Answer 3

将 ul 宽度更改为 100%，将 text-align 更改为 right。子 li 将显示为 inline-block，因此它们将像文本一样移动到右侧。