HTML CSS : <li> 项目重复导致图像重复答案

【问题标题】：HTML CSS : <li> items are duplicating resulting in duplicate imagesHTML CSS : <li> 项目重复导致图像重复
【发布时间】：2011-11-17 00:42:48
【问题描述】：

由于某种原因，<li> 项目在我的 wordpress 网站中重复。我已将 header.php 文件中的代码与您在下面看到的内容隔离开来。我也不认为问题出在 CSS 中，但我不知道是什么原因造成的。

进入的代码如下所示：

        <div id="toplinks">
        <ul id="links">
            <li><a class="narch"/>  </li>
            <li><a href="http://www.torhs.com" title="TORHS" class="torhs" target="_blank" /> </li>
            <li><a href="http://www.omrha.com" title="OMRHA" class="omhra" target="_blank" /></li>
            <li><a href="http://www.jangosportswear.com" title="JANGO" class="jango" target="_blank" /> </li>
            <li><a href="http://www.statewarshockey.com" title="State Wars" class="statewars" target="_blank" /> </li>
            <li><a href="#" title="Wicked Biscuit" class="wickedbiscuit" target="_blank" /> </li>
            <li><a href="#" title="Rattlers" class="rattlers" target="_blank" /> </li>
            <li><a href="http://www.revisionhockey.com" title="Revision Hockey" class="revision" target="_blank" /> </li>
            <li><a href="http://www.rollerhockeyalliance.com" title="RHA" class="RHA" target="_blank" /> </li>
            <li><a href="http://www.rinkrathockey.com" title="Rink Rat" class="rinkrat" target="_blank" /> </li>

            <li><a href="http://www.rocketpuck.com" title="Rocket Puck" class="rocketpuck" target="_blank" /> </li>
            <li><a href="http://www.missionhockey.com" title="Mission" class="mission" target="_blank" /> </li> 
        </ul>
    </div> <!--clooses toplinks-->

出来的代码（使用 firebug 获取）如下所示。

<ul id="links">
<li>
<a class="narch"> </a>
</li>
<a class="narch"> </a>
<li>
<a class="narch"></a>
<a class="torhs" target="_blank" title="TORHS" href="http://www.torhs.com"> </a>
</li>
<a class="torhs" target="_blank" title="TORHS" href="http://www.torhs.com"> </a>
<li>
<a class="torhs" target="_blank" title="TORHS" href="http://www.torhs.com"></a>
<a class="omhra" target="_blank" title="OMRHA" href="http://www.omrha.com"></a>
</li>
<a class="omhra" target="_blank" title="OMRHA" href="http://www.omrha.com"> </a>
<li>
<a class="omhra" target="_blank" title="OMRHA" href="http://www.omrha.com"></a>
<a class="jango" target="_blank" title="JANGO" href="http://www.jangosportswear.com"> </a>
</li>
<a class="jango" target="_blank" title="JANGO" href="http://www.jangosportswear.com"> </a>
<li>
<a class="jango" target="_blank" title="JANGO" href="http://www.jangosportswear.com"></a>
<a class="statewars" target="_blank" title="State Wars" href="http://www.statewarshockey.com"> </a>
</li>
<a class="statewars" target="_blank" title="State Wars" href="http://www.statewarshockey.com"> </a>
<li>
<a class="statewars" target="_blank" title="State Wars" href="http://www.statewarshockey.com"></a>
<a class="wickedbiscuit" target="_blank" title="Wicked Biscuit" href="#"> </a>
</li>
<a class="wickedbiscuit" target="_blank" title="Wicked Biscuit" href="#"> </a>
<li>
<a class="wickedbiscuit" target="_blank" title="Wicked Biscuit" href="#"></a>
<a class="rattlers" target="_blank" title="Rattlers" href="#"> </a>
</li>
<a class="rattlers" target="_blank" title="Rattlers" href="#"> </a>
<li>
<a class="rattlers" target="_blank" title="Rattlers" href="#"></a>
<a class="revision" target="_blank" title="Revision Hockey" href="http://www.revisionhockey.com"> </a>
</li>
<a class="revision" target="_blank" title="Revision Hockey" href="http://www.revisionhockey.com"> </a>
<li>
<a class="revision" target="_blank" title="Revision Hockey" href="http://www.revisionhockey.com"></a>
<a class="RHA" target="_blank" title="RHA" href="http://www.rollerhockeyalliance.com"> </a>
</li>
<a class="RHA" target="_blank" title="RHA" href="http://www.rollerhockeyalliance.com"> </a>
<li>
<a class="RHA" target="_blank" title="RHA" href="http://www.rollerhockeyalliance.com"></a>
<a class="rinkrat" target="_blank" title="Rink Rat" href="http://www.rinkrathockey.com"> </a>
</li>
<a class="rinkrat" target="_blank" title="Rink Rat" href="http://www.rinkrathockey.com"> </a>
<li>
<a class="rinkrat" target="_blank" title="Rink Rat" href="http://www.rinkrathockey.com"></a>
<a class="rocketpuck" target="_blank" title="Rocket Puck" href="http://www.rocketpuck.com"> </a>
</li>
<a class="rocketpuck" target="_blank" title="Rocket Puck" href="http://www.rocketpuck.com"> </a>
<li>
<a class="rocketpuck" target="_blank" title="Rocket Puck" href="http://www.rocketpuck.com"></a>
<a class="mission" target="_blank" title="Mission" href="http://www.missionhockey.com"> </a>
</li>
<a class="mission" target="_blank" title="Mission" href="http://www.missionhockey.com"> </a>
</ul>
<a class="mission" target="_blank" title="Mission" href="http://www.missionhockey.com"> </a>
</div>
<a class="mission" target="_blank" title="Mission" href="http://www.missionhockey.com"> </a>

【问题讨论】：

标签： php html wordpress duplicates html-lists

【解决方案1】：

您可能会将 HTML 与 XML 样式的标记混淆。

最基本的链接是这样标记的：

<a href="http://www.google.com/">Google</a>

title 属性实际上是显示元素工具提示的内容。

【讨论】：

【解决方案2】：

<a class="narch"/>

正确关闭锚点

【讨论】：