我是wordpress和创建我的第一个主题的初学者。我被困在一个地方。在我的静态html中,我使用列表中的图像来设置导航样式。我可以在wordpress中进行动态导航,但我无法将我的图像动态地放在li中。
我的静态导航代码在这里
<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>
我如何才能获得这种动态的替代方案
<li class="li_img"><img src="imgs/line-img.png" /></li>
如果可以的话,我会避免用这种方式设置菜单项的样式。为边框/分隔符图像使用单独的li会破坏HTML/CSS关系的目的。你能把img.png行应用到li元素的背景上吗?
菜单是否使用wp_nav_menu()?它应该生成类似于的代码
<ul class="menu">
<li id="menu-item-1" class="menu-item">Menu Item</li>
</ul>
你可以用类似的东西来设计上面的样式:
.menu-item {
background: url(imgs/line-img.png) no-repeat right center;
}