Question

我是wordpress的新手。我想在wordpress中自定义一个页面，我想要创建一个水平菜单栏但是在尝试了所有可行的方法后，我仍然无法制作一个水平的栏。它看起来像下面的图像

＆＃13;

/*
Theme Name: Twenty Fourteen
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
*/

body
{
	margin:0;
	padding:0;
}


ul.Menu
{
    list-style-type: none;
    margin-top:0.8%;
    padding: 3%;
	text-decoration:none;
	float:right;
	font-size:18px;
	font-family:Lato-Regular;
	margin-right:20%;
	position:relative;
	background-color:#A52A2A;
	display:inline-block;
}

li.Menu
{
    display: inline-block;
	padding:15px;
}

ul li a.Menu 
{
	color:#32445A;
	text-decoration:none;
}

＆＃13;

<body <?php body_class(); ?>>

<div>
<ul class="Menu">
  <li class="list"><a class="Listclass" href="#home"><img src="http://10.37.4.179/wordpress/wp-content/uploads/2016/07/home-active.png" alt="home"></a></li>
  <li class="list"><a class="Listclass" href="#Features & Benefits">Features & Benefits</a></li>
  <li class="list"><a class="Listclass" href="#Support">Support</a></li>
  <li class="list"><a class="Listclass" href="#Training">Training</a></li>
  <li class="list"><a class="Listclass" href="#What's New">What's New</a></li>
  <li class="list"><a class="active" href="#Aboutus">About Us</a></li>
  <li class="list"><a class="Listclass" href="#Contact">Contact Us</a></li>
</ul>
</div>

＆＃13;

请帮我为自定义主页创建水平内联菜单栏

Answer 1

您定位li上的错误班级。应该是：

ul.Menu li.list {
  display: inline-block;
  padding: 15px;
}

您的链接上也没有课程Menu，因此CSS错误，应该是：

ul.Menu a.ListClass  {
  color: #32445A;
  text-decoration: none;
}

最后，您可能希望ul display: block自动占据100％的宽度。

ul.Menu {
    list-style-type: none;
    margin-top:0.8%;
    padding: 3%;
    text-decoration:none;
    float:right;
    font-size:18px;
    font-family:Lato-Regular;
    margin-right:20%;
    position:relative;
    background-color:#A52A2A;
    display:block;
}

Answer 2

你想要的吗？

/*
Theme Name: Twenty Fourteen
Theme URI: https://wordpress.org/themes/twentyfourteen/
Author: the WordPress team
Author URI: https://wordpress.org/
*/

body
{
	margin:0;
	padding:0;
}


ul.Menu
{
    list-style-type:none;
	text-decoration:none;
	font-size:18px;
	font-family:Lato-Regular;
	margin-right:20%;
	position:relative;	
	display:inline-block;
    width: 100%;
}

li.Menu
{
    display: inline-block;
	
}
ul li{
    float:left;
    width:14.2%;
}

ul li a
{
	color:#32445A;
	text-decoration:none;
}

<body <?php body_class(); ?>

<div>
<ul class="Menu">
  <li class="list"><a class="Listclass" href="#home"><img src="http://10.37.4.179/wordpress/wp-content/uploads/2016/07/home-active.png" alt="home"></a></li>
  <li class="list"><a class="Listclass" href="#Features & Benefits">Features & Benefits</a></li>
  <li class="list"><a class="Listclass" href="#Support">Support</a></li>
  <li class="list"><a class="Listclass" href="#Training">Training</a></li>
  <li class="list"><a class="Listclass" href="#What's New">What's New</a></li>
  <li class="list"><a class="active" href="#Aboutus">About Us</a></li>
  <li class="list"><a class="Listclass" href="#Contact">Contact Us</a></li>
</ul>
</div>

如何在wordpress的自定义主页中创建水平（内联）菜单栏

2 个答案: