wordpress 自定义菜单未对齐

Question

我正在尝试对齐菜单元素，我尝试了多种方法和很多次，但我无法让它工作。

我目前正在学习教程

这是我目前的成果：

我添加了大部分代码，如果您发现任何错误，请帮忙，即使chatGPT也没有任何帮助。

这是我的代码：

主题CSS文件：

/* 
Theme Name: kushtech
Description: blog, shopping, my first wp theme
Author:Kush
Author URI: https://kusal.in/
Version:1.0.0
Text Domain: kusaldomain
Description: We are learning wordpress
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6


*/

Index.php 文件：

<?php   
/*  

This template for displaying the header


*/
?>
<!DOCTYPE html>
<html lang="<?php language_attributes(); ?>" class="no-js">

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php  wp_head(); ?>
</head>

<body <?php body_class( ); ?>>
    <div id="header_area">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="#"><img src="<?php echo get_theme_mod( 'kush_logo'); ?> " alt="logo"></a>
                </div>
                <div class="col-md-9">
                    <?php wp_nav_menu( array('theme_location' => 'main_menu', 'menu_id' => 'nav') ); ?>
                </div>
            </div>
        </div>
    </div>

    <?php wp_footer(); ?>
</body>

</html>

自定义.css 文件：

/* Common CSS */

img {
  max-width: 100%;
}

/* Header Area Style */

#headr_area {
  padding: 15px 0;
}

/*=======================================
 Common CSS
========================================*/
body {
  font-family: "Kaisei Decol", serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
  line-height: 1.5em;
}
img {
  max-width: 100%;
}

/*=======================================
   Header Area Style
  ========================================*/
#header_area {
  padding: 15px 0;
}


#header_area .col-md-3 {
  margin: 0 40px;
}

#header_area .col-md-9 ul {
  font-family: "Oswald", sans-serif;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
#header_area .col-md-9 ul li {
  display: inline-block;
  position: relative;
}
#header_area .col-md-9 ul li a {
  color: #262626;
  padding: 20px 10px;
  display: block;
  text-transform: uppercase;
  text-decoration: none;
}
#header_area .col-md-9 ul li a:hover {
  background: #ea1a70;
  color: #fff;
}

/*Dropdown Menu*/
#header_area .col-md-9 ul li ul {
  background: #262626 none repeat scroll 0 0;
  left: -99999px;
  margin: 0;
  position: absolute;
  text-align: left;
  top: 62px;
  width: 200px;
}
#header_area .col-md-9 ul li:hover ul {
  left: 0px;
}
#header_area .col-md-9 ul li ul li {
  display: block;
}
#header_area .col-md-9 ul li ul li a {
  color: #fff;
  padding: 8px 10px;
}
#header_area .col-md-9 ul li ul li a:hover {
  background: #ddd;
  color: #262626;
}
#header_area .col-md-9 ul li:hover a {
  background: #ea1a70;
  color: #fff;
}
#header_area .col-md-9 ul li:hover ul li a {
  background: none;
  color: #fff;
}

/*Sub Dropdown Menu*/
#header_area .col-md-9 ul li ul ul {
  left: -99999px;
  top: 0;
  position: absolute;
}
#header_area .col-md-9 ul li:hover ul li ul {
  left: -999999px;
}
#header_area .col-md-9 ul li ul li:hover ul {
  left: 200px;
}
#header_area .col-md-9 ul li ul li:hover a {
  background: #ea1a70;
  color: #fff;
}
#header_area .col-md-9 ul ul li:hover ul li a {
  background: #262626;
  color: #fff;
}
#header_area .col-md-9 ul ul li ul li a:hover {
  background: #ea1a70;
  color: #fff;
}

function.php 文件：

<?php
/* 
My theme function

*/

// theme title

add_theme_support( 'title-tag ');

// Theme css and Jquary file clling

function kush_css_js_file_calling(){
    wp_enqueue_style( 'kush-style', get_stylesheet_uri() );
    wp_register_style('bootstrap', get_template_directory_uri().'/css/bootstrap.css', array(), '5.0.2', 'all');
    wp_register_style('custom', get_template_directory_uri().'/css/custom.css', array(), '1.0.0', 'all');
    wp_enqueue_style( 'bootstrap');
    wp_enqueue_style( 'custom');


    //jQuary Calling
    // wp_enqueue_script( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $in_footer:boolean )
    wp_enqueue_script( 'jquery' );
   
    wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/js/bootstrap.js', array(), '5.0.2','true');
    wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js', array(), '1.0.0','true');
}

add_action( 'wp_enqueue_scripts', 'kush_css_js_file_calling');

// Google Fonts Enqueue
function kush_add_google_fonts() {
    wp_enqueue_style('kush-google_fonts', 'https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap', false);
}

add_action( 'wp_enqueue_scripts', 'kush_add_google_fonts');


// theme function

function kush_customizar_register($wp_customize){
    $wp_customize->add_section('kush_header_area', array(
        'title' => __('Header Area', 'kusaldomain'),
        'description' => 'If you interested to update your header area, you can do it here.'
    ));
    
    $wp_customize->add_setting('kush_logo',array(
        'default' => get_bloginfo('template_directory') . '/img/logo.png'
    ));

    $wp_customize-> add_control(new WP_Customize_Image_Control($wp_customize, 'kush_logo', array(
     'label' => 'Logo Upload', 
     'description' => 'If you interested to change or update your logo, you can do it here..',
     'settings' => 'kush_logo',
     'section' => 'kush_header_area',
    )));
    
}

add_action('customize_register','kush_customizar_register' );

//Menu Register
register_nav_menu( 'main_menu', __('Main Menu', 'kusaldomain'));


?>

Answer 1

尝试使用 Chrome 中的检查元素工具来查看造成空间的原因。我怀疑顶部空间来自分配给 #header_area .col-md-9 ul.

的上边距

尝试使用零上边距：

#header_area .col-md-9 ul {
  font-family: "Oswald", sans-serif;
  margin: 0px 0 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

wordpress 自定义菜单未对齐

问题描述投票：0回答：1

1个回答

最新问题

wordpress 自定义菜单未对齐

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1