Php 如何在WordPress中从左到右显示菜单对齐？_Php_Html_Css_Wordpress_Wordpress Theming

Php 如何在WordPress中从左到右显示菜单对齐？

php html css wordpress

Php 如何在WordPress中从左到右显示菜单对齐？,php,html,css,wordpress,wordpress-theming,Php,Html,Css,Wordpress,Wordpress Theming,我是WordPress主题开发新手，对菜单项的对齐有问题。它从上到下显示，我想从左到右更改项目，并添加一些功能，如项目悬停，它将是粗体&显示子页面我不能改变任何东西：颜色、大小等我怎样才能解决这个问题我的菜单是什么样子的：我希望看到的是： myheader.php文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

我是WordPress主题开发新手，对菜单项的对齐有问题。它从上到下显示，我想从左到右更改项目，并添加一些功能，如项目悬停，它将是粗体&显示子页面

我不能改变任何东西：颜色、大小等

我怎样才能解决这个问题

我的菜单是什么样子的：

我希望看到的是：

myheader.php文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
        <div id="page">
            <a href="#content" class="skip-link screen-reader-text">
                <?php esc_html_e( 'Skip to content', 'wphierarchy' ) ?>
            </a>
            <header id="masthead" class="site-header" role="banner">
                <div class="site-branding">
                    <p class="site-title">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                            <?php bloginfo( 'name' ); ?>
                        </a>
                    </p>
                    <p class="site-description">
                        <?php bloginfo( 'description' ); ?>
                    </p>
                </div>

                <nav id="site-navigation" class="main navigation" role="navigation">
                    <?php
                        $args = [
                            'theme_location' => 'main-menu'
                        ];
                        wp_nav_menu( $args );
                    ?>
                </nav>
            </header>
            <div id="content" class="site-content">

要从左到右对齐项目，您可以在

ul

上使用flex，该菜单主菜单具有id

菜单，因为它是所有菜单元素之间的第一个公共父元素
尝试下面的代码，这将有助于实现您需要的功能，但在移动设备上会出现问题


#site-navigation #menu-main-menu{
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: stretch;
}
#site-navigation #menu-main-menu  li {
  padding: 15px;
  display: block;
  position: relative;
}
#site-navigation #menu-main-menu li   ul {
  display: none;
} 

#site-navigation #menu-main-menu li:hover ul {
  display: block;
  margin: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  background: red;
}
#site-navigation #menu-main-menu li:hover ul a {
  width: 100%;
  display: block
}

您好，Hello下的HTML部分是什么！我添加了你要求的HTML部分。它很有效！非常感谢。但还有一个问题。当悬停在“父页面”上时，子页面会查看内容区域的后面。不是在上面。如果我将位置从绝对更改为相对，这一次内容区域将下降，而不是固定，