0

我已经在 HTML5 文件中成功使用了这两种示例方法。（我有一个纯 HTML5 文件示例来演示这一点，但我还不允许发布超过 2 个链接。）

这些方法都不能在 WordPress 4.8.1 的 HTML 侧边栏小部件中正常工作。

我正在使用 WordPress 4.8.1 和 WordPress 4.8.1 附带的新的自定义 HTML 侧边栏小部件。我正在尝试获取一个无序列表，该列表对每个列表项使用不同的图像图标而不是项目符号。

在一个网站中，我尝试使用以下 HTML 将每个图标与列表项一起放入：

<ul class="follow">
<li style="list-style-type: none;"><img style="display: inline; text-align: left; vertical-align: middle; padding-right: 10px;" src="http://stcwdc.org/images/chapter_logo_54pxtype-28x28.png" alt="Small chapter logo" width="28" height="28" /><a href="http://events.stcwdc.org/">Chapter Events and News</a></li>
<li style="list-style-type: none;"><img style="display: inline; text-align: left; vertical-align: middle; padding-right: 12px;" src="http://stcwdc.org/images/twitter-letter-icon-28x28-1.png" width="28" height="28" alt="Follow us on Twitter" /><a href="https://twitter.com/stcwdc" rel="nofollow">Twitter</a></li>
<li style="list-style-type: none;"><img style="display:inline; text-align:left; vertical-align:middle; padding-right:12px;" src="http://stcwdc.org/images/in.jpg" width="28" height="28" alt="Join our group on LinkedIn" /><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow">LinkedIn Group</a></li>
</ul>

但是，除了列表中的顶部，这给了我一个列表，其中包含项目符号和中间五个列表项中的图像图标，即使它们是 list-style-type:none。请参阅竞赛网站侧边栏中“关注我们”下方的第 4 个小部件

在另一个网站上，我尝试了另一种方法。我搜索了 Stackoverflow 并找到了 2010/2012 年的问答。我尝试了该代码，但它不起作用——我得到的是项目符号而不是图标。请参阅新闻和活动网站侧边栏中“关注我们”下方的第 6 个小部件也许这是因为更新的 WordPress、CSS 和新的自定义 HTML 小部件？我使用的模型来自（每个 li 的不同列表样式图像）

这是我正在使用的 HTML：

<ul class="follow">
<li class="chapicon"><a href="http://events.stcwdc.org/">Chapter Events and News</a></li>
<li class="twittericon"><a href="https://twitter.com/stcwdc" rel="nofollow">Twitter</a></li>
<li class="linkedinicon"><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow">LinkedIn Group</a></li>
<li class="pinteresticon"><a href="https://www.pinterest.com/stcwdcmb/" rel="nofollow">Pinterest page</a></li>
<li class="rssicon"><a href="http://events.stcwdc.org/feed">RSS Events Feed</a></li>
<li class="rssicon"><a href="http://wdcb.stcwdc.org/STC_Washington_DC_Chapter.xml">RSS WDCB site Feed</a></li>
<li style="list-style-type: square;">Join our <a href="http://wdcb.stcwdc.org/prof-dev/networking/lists/list-annc/">Announcement list</a></li>
<li style="list-style-type: square;">Join our <a href="http://wdcb.stcwdc.org/prof-dev/networking/lists/list-chat/">Chat list</a></li>
</ul>

这是我正在使用的 CSS：

aside.widget_custom_html div.custom-html-widget {
    color: #333;
    margin: 9px 0 10px 9px;
    padding: 8px;
    overflow:hidden;
}

aside.widget_custom_html div.custom-html-widget ul li a {
    color: #2222ac;   /*----Dark blue. ----*/
    background-color: transparent;
    text-decoration: none;
}

aside.widget_custom_html div.custom-html-widget ul li a:visited { 
    color: #981b1e;   /*----secondary-red-darkest. ----*/
    background-color: transparent;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration: #981b1e wavy underline; /* Ignored in CSS1/CSS2 UAs */
}

aside.widget_custom_html div.custom-html-widget ul li a:hover,
aside.widget_custom_html div.custom-html-widget ul li a:focus; { 
    color: #5b616b;   /*--- coal-blue-light  ----*/
    background-color: transparent;
    text-decoration:underline;
    text-decoration-style: dotted;
    text-decoration: #5b616b dotted underline; /* Ignored in CSS1/CSS2 UAs */
}

aside.widget_custom_html div.custom-html-widget ul.follow {
    display: inline;
    padding-top: 2px;
}

aside.widget_custom_html div.custom-html-widget ul.follow li {
    list-style-type: none;
}

aside.widget_custom_html div.custom-html-widget ul.follow li.chapicon {
    list-style-image:url('http://events.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-16x16.png');
    list-style-position:outside;
}

aside.widget_custom_html div.custom-html-widget ul.follow li.twittericon {
    list-style-image:url('http://events.stcwdc.org/wp-content/uploads/twitter.gif');
    list-style-position:outside;
}

aside.widget_custom_html div.custom-html-widget ul.follow li.linkedinicon {
    list-style-image:url('http://events.stcwdc.org/wp-content/uploads/in.jpg');
    list-style-position:outside;
}

aside.widget_custom_html div.custom-html-widget ul.follow li.pinteresticon {
    list-style-image:url('http://events.stcwdc.org/wp-content/uploads/pinterest_logo.png');
    list-style-position:outside;
}

aside.widget_custom_html div.custom-html-widget ul.follow li.rssicon {
    list-style-image:url('http://events.stcwdc.org/wp-content/uploads/rss.png');
    list-style-position:outside;
}

我需要做什么才能使这两种方法在最新的 WordPress 4.8.1 侧边栏小部件中用于 HTML？

4

0 回答 0