0

我是 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>
4

1 回答 1

1

如果可以的话，我会避免以这种方式设置菜单项的样式。为边框/分隔符图像设置单独的 li 违背了 HTML/CSS 关系的目的。您可以将 line-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;
}
于 2013-08-05T19:48:38.400 回答