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

Question

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

/*
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;
}

<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>

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

Answer 1

您在 li 上定位错误的 class。应该是：

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

您的链接上也没有 class 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 的自定义主页中创建水平（内联）菜单栏

How to create Horizontal (inline) Menu bar in custom home page of wordpress

wordpress

wordpress-theming

drop-down-menu