ワードプレスのカスタムホームページに水平（インライン）メニューバーを作成する

私はワードプレスを初めて使用しています。私は、横のメニューバーを作成したいが、すべての可能な方法を試した後に私は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にあります。次のようになります。そのCSSが間違っているとする必要がありますので

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

また、あなたのリンクのクラスMenuを持っていない：

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編集済み。気軽に質問してください –

ワードプレスのカスタムホームページに水平（インライン）メニューバーを作成する

答えて

関連する問題