[英]adding style image in cutom menu wordpress
I am a beginner to wordpress and creating my first theme. 我是一个初学者,可以用wordpress创建第一个主题。 I am stuck at one place.
我被困在一个地方。 In my static html, i used images in lists to style my navigation.
在我的静态html中,我使用列表中的图像来设置导航样式。 I am able to make dynamic navigation in wordpress but i am unable to work out for putting my images in li dynamically.
我可以在wordpress中进行动态导航,但是无法解决将图片动态放置在li中的问题。
My static code for navigation is here 我的导航静态代码在这里
<ul>
<li class="li_img"><img src="imgs/line-img.png" /></li>
<li class="li_txt"><a href="#">Home</a></li>
<li class="li_img"><img src="imgs/line-img.png" /></li>
<li class="li_txt"><a href="#">About</a></li>
<li class="li_img"><img src="imgs/line-img.png" /></li>
<li class="li_txt"><a href="#">Archives</a></li>
<li class="li_img"><img src="imgs/line-img.png" /></li>
<li class="li_txt"><a href="#">Write for Us</a></li>
<li class="li_img"><img src="imgs/line-img.png" /></li>
<li class="li_txt"><a href="#">Sitemap</a></li>
<li class="li_img"><img src="imgs/line-img.png" /></li>
<li class="li_txt"><a href="#">Contact</a></li>
<li class="li_img"><img src="imgs/line-img.png" /></li>
</ul>
How can i get the alternative of this dynamically 我如何动态地获得替代方案
<li class="li_img"><img src="imgs/line-img.png" /></li>
If you can, I would avoid styling menu items this way. 如果可以,我将避免以这种方式设置菜单项的样式。 Having a separate li for a border/separator image defeats the purpose of the HTML/CSS relationship.
为边框/分隔符图像使用单独的li会破坏HTML / CSS关系的目的。 Could you apply the line-img.png to the background of the li element?
您可以将line-img.png应用于li元素的背景吗?
Are you using wp_nav_menu() for the menu? 您是否正在使用wp_nav_menu()作为菜单? It should generate code similar to:
它应生成类似于以下内容的代码:
<ul class="menu">
<li id="menu-item-1" class="menu-item">Menu Item</li>
</ul>
You could could style the above with something like: 您可以使用类似以下内容的样式:
.menu-item {
background: url(imgs/line-img.png) no-repeat right center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.