Question

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

这两种方法都没有在Word的WordPress 4.8.1侧栏小部件中正常工作。

我正在使用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个小部件＆＃34;关注我们＆＃34;在Competition website

的侧边栏中

在另一个网站上，我尝试了另一种方法。我搜索了Stackoverflow，并在2010/2012年找到了一个问题和答案。我试过那段代码，但它不起作用 - 我得到了子弹而不是图标。请参阅第6个小部件＆＃34;关注我们＆＃34;在News and Events website的侧边栏中或许这是因为较新的WordPress，CSS和新的自定义HTML小部件？我使用的模型来自（Different list style image for each 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？

如何在WordPress 4.8.1侧边栏小部件中用图像图标替换列表项目符号？

0 个答案: