Question

我有ul旁边有背景图片。我在span标记中有一个文字无效，我无法弄清楚原因。

这是HTML代码：

<div>
    <ul id="first" class="img_yellow_arrow" style="margin-left:120px">
      <span class="brightOrange"style="margin-left:5px">3&nbsp;</span>
      <span class="gris">nouveaux e-mails,</span>
       <li>A</li>
       <li>B</li>
       <li>C</li>
    </ul>
</div>

这是我的班级：

.img_yellow_arrow{
content:url(images/yellow_arrow_2.png);
vertical-align:middle;
}

我说，我们可以在<span>内加<ul>并使用以下代码验证HTML：

<html>
<body>

<h4>An Unordered List:</h4>
<ul><span>x</span>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>

如果你能帮助我解决这个问题，我将不胜感激。提前致谢

Answer 1

将您的HTML更改为：

<div><span class="brightOrange" style="margin-left:5px">3&nbsp;</span><span class="gris">nouveaux e-mails,</span>
    <ul id="first" class="img_yellow_arrow" style="margin-left:120px">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>

目前无效 - <span>标记不是列表的有效子元素，因此应该显示在<ul>元素之外，或者出现在其子<li>个元素之内。

请参阅此处查看further information from w3c

Answer 2

更改你的CSS。以下是代码http://jsfiddle.net/pTccG/

如果您想使用背景，请使用背景图像。

我认为这里的代码内容覆盖在文本上。

instead of "content" use "background-image"..

    .img_yellow_arrow{
    background-image:url(images/yellow_arrow_2.png);
    vertical-align:middle;
    }

在ul之后，span标记不起作用

2 个答案: