Question

上面的图片是我的导航栏或多或少应该是什么样子。我正在从头开始编写我的wordpress网站，我的带有标题类=“site-header”的导航栏将不会显示：阻止或删除其文本修饰。有什么奇怪的是

.site-header nav ul li {
margin-right: 5px;
}

的工作原理。这些盒子出于某种原因不会出现。

非常感谢帮助:)

/* 
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/

body {
	font-family: 'Malgun Gothic','맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif;
	font-size: 20px;
	color: #333;
}

a:link
a:visited {
	color: #006ec3;
}

p {
	line-height: 1.65em;
}

/* General Layout */
div.container {
	max-width: 920px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

article.post {
	border-bottom: 2px dotted #999;
}

article.post:last-of-type {
	border-bottom: none;
}

/* Header */
.site-header {
	border-bottom: 2px solid #999
}

/* Footer */
.site-footer {
	margin-top: 30px;
	border-bottom: 2px solid #999
}

/* Navigation Menus */
.site-nav ul {
	margin: 0;
	padding: 0;
}

.site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1; }

.site-nav ul li {
	list-style: none;
	float: left;
}

/* Site Header Menu */
.site-header nav ul li {
	margin-right: 5px;
}

.site-header nav ul li a:link,
.site-header nav ul li a:visited, {
	display: block;
	padding: 10px 18px;
	border: 1px solid #BBB;
	border-bottom: none;
	text-decoration: none;
}


.site-header nav ul li a:hover {
	background-color: grey;
}

<!--footer.php-->
    <footer class="site-footer">
	
		<nav class="site-nav">
				<?php

				$args = array(
					'theme_location' => 'footer'
				);

				?>

				<?php wp_nav_menu($args); ?>
		</nav>

		<p><?php bloginfo('name'); ?> - &copy; <?php echo date('Y');?></p>
	
	</footer>

</div><!--/container-->

<?php wp_footer(); ?>
</body>
</html>

<!--functions.php-->
<?php

function learningWordPress_resources() {

	wp_enqueue_style('style', get_stylesheet_uri());

}

add_action('wp_enqueue_scripts', 'learningWordPress_resources');

// Navigation Menus
register_nav_menus(array(
	'primary' => __('Primary Menu'),
	'footer' => __('Footer Menu'),
));

<!--header.php-->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
	<head>
		<meta charset="<?php bloginfo('charset'); ?>">
		<meta name="viewport" content="width=device-width">
		<title><?php bloginfo('name'); ?></title>
		<?php wp_head(); ?>
	</head>

<body <?php body_class(); ?>>

	<div class="container">

		<!--site-header-->
		<header class="site-header">
			<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>	</h1>
			<h5><?php bloginfo('description'); ?></h5>

			<nav class="site-nav">
				<?php

				$args = array(
					'theme_location' => 'primary'
				);

				?>

				<?php wp_nav_menu($args); ?>
			</nav>

		</header><!--/site-header-->
	

<!--index.php-->
      <?php

get_header();

if (have_posts()) : 
	while (have_posts()) : the_post(); ?>

	<article class="post">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<?php the_content(); ?>
	</article>
	
	<?php endwhile;

	else: 
		echo '<p>No content found</p>';

	endif;

get_footer();

?>

}

Answer 1

您的代码有一个小的语法错误，导致您的样式无法应用：

.site-header nav ul li a:link,
.site-header nav ul li a:visited, {

最后的额外逗号,需要一个额外的选择器，但遇到了{。只需删除额外的逗号即可。这应该可以解决你的问题。

工作演示：

/* 
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/

body {
  font-family: 'Malgun Gothic', '맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif;
  font-size: 20px;
  color: #333;
}

a:link a:visited {
  color: #006ec3;
}

p {
  line-height: 1.65em;
}

/* General Layout */

div.container {
  max-width: 920px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Header */

.site-header {
  border-bottom: 2px solid #999
}

/* Navigation Menus */

.site-nav ul {
  margin: 0;
  padding: 0;
}

.site-nav ul:before,
.site-nav ul:after {
  content: "";
  display: table;
}

.site-nav ul:after {
  clear: both;
}

.site-nav ul {
  *zoom: 1;
}

.site-nav ul li {
  list-style: none;
  float: left;
}

/* Site Header Menu */

.site-header nav ul li {
  margin-right: 5px;
}

.site-header nav ul li a:link,
.site-header nav ul li a:visited {
  display: block;
  padding: 10px 18px;
  border: 1px solid #BBB;
  border-bottom: none;
  text-decoration: none;
}

.site-header nav ul li a:hover {
  background-color: grey;
}

<div class="container">
  <!--site-header-->
  <header class="site-header">
    <h1><a href="#">Blog Name</a></h1>
    <h5>Blog Desc</h5>
    <nav class="site-nav">
      <ul class="menu">
        <li class="menu-item"><a href="#">Link 1</a>
        </li>
        <li class="menu-item"><a href="#">Link 2</a>
        </li>
        <li class="menu-item"><a href="#">Link 3</a>
        </li>
      </ul>
    </nav>
  </header>
</div>

Wordpress中的导航栏不会显示：阻止

1 个答案: