如何在wordpress的自定義主頁中創建橫向（內聯）菜單欄

我是WordPress新手。我想在WordPress中定製一個頁面，在那裏我想創建一個水平菜單欄，但嘗試所有可能的方式後，我仍然無法制作一個hozizontal酒吧。它看起來像下面的圖片如何在wordpress的自定義主頁中創建橫向（內聯）菜單欄

Menu bar Image

/* 
 
Theme Name: Twenty Fourteen 
 
Theme URI: https://wordpress.org/themes/twentyfourteen/ 
 
Author: the WordPress team 
 
Author URI: https://wordpress.org/ 
 
*/ 
 

 
body 
 
{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 

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

 
li.Menu 
 
{ 
 
    display: inline-block; 
 
\t padding:15px; 
 
} 
 

 
ul li a.Menu 
 
{ 
 
\t color:#32445A; 
 
\t 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>

請幫我創建水平直列菜單欄爲我定製主頁

來源

2016-07-04 Arpit Gupta

你指定了錯誤的類在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; 
}

來源

2016-07-04 12:34:48 Coop

仍然沒有工作，先生。你可以請建議我充分的CSS爲此 –

請參閱我編輯的答案 – Coop

是你想要嗎？

/* 
 
Theme Name: Twenty Fourteen 
 
Theme URI: https://wordpress.org/themes/twentyfourteen/ 
 
Author: the WordPress team 
 
Author URI: https://wordpress.org/ 
 
*/ 
 

 
body 
 
{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 

 
ul.Menu 
 
{ 
 
    list-style-type:none; 
 
\t text-decoration:none; 
 
\t font-size:18px; 
 
\t font-family:Lato-Regular; 
 
\t margin-right:20%; 
 
\t position:relative; \t 
 
\t display:inline-block; 
 
    width: 100%; 
 
} 
 

 
li.Menu 
 
{ 
 
    display: inline-block; 
 
\t 
 
} 
 
ul li{ 
 
    float:left; 
 
    width:14.2%; 
 
} 
 

 
ul li a 
 
{ 
 
\t color:#32445A; 
 
\t 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>

來源

2016-07-04 12:58:40

這就是我所得到的。我想要一個水平內聯菜單欄。 –

瞭解它..等待最短 –

@ArpitGupta編輯..隨意問 –

如何在wordpress的自定義主頁中創建橫向（內聯）菜單欄

回答

相關問題