So erstellen Sie horizontale (inline) Menüleiste in benutzerdefinierten Homepage von WordPress

Ich bin neu in WordPress. Ich möchte eine Seite in WordPress anpassen, wo ich eine horizontale Menüleiste erstellen möchte, aber nachdem ich alle möglichen Wege versucht habe, bin ich noch nicht in der Lage, eine horizontale Leiste zu erstellen. ist esSo erstellen Sie horizontale (inline) Menüleiste in benutzerdefinierten Homepage von 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>

Bild unten sehen aus wie

mir bitte helfen eine horizontale Inline-Menüleiste für meine benutzerdefinierte Homepage

Quelle

2016-07-04 Arpit Gupta

Sie gezielt die falsche Klasse zu erstellen auf der li s. Sollte sein:

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

Sie haben auch nicht die Klasse Menu auf Ihre Links, so dass CSS falsch ist und sein sollte:

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

Schließlich wollen Sie wahrscheinlich Ihre ul sein display: block zu automatisch 100% Breite.

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

Quelle

2016-07-04 12:34:48 Coop

arbeiten noch nicht Sir. Könnten Sie bitte schlagen Sie mir volle CSS für diese –

Siehe meine bearbeitete Antwort – Coop

Wollen Sie das?

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

Quelle

2016-07-04 12:58:40

das ist, was ich bekomme. Ich möchte eine horizontale Inline-Menüleiste. –

bekam es..warte für min –

@ArpitGupta bearbeitet..feel frei zu fragen –

So erstellen Sie horizontale (inline) Menüleiste in benutzerdefinierten Homepage von WordPress

Antwort

Verwandte Themen