Question

我编写了以下代码，包括div和span。我希望div中的span有不同的颜色，但它似乎不起作用..这是html代码：

    <div class="menu">
        <p class="menuHeader">Menu</p>
        <ul class="menuList">
            <li><a href="">Inspiration</a></li>
            <li><a href="">Motivation</a></li>
            <li><a href="">Decision</a></li>
            <li><a href="">Solution</a></li>
            <li><a href="">Action</a></li>
        </ul>

        <span id="decorationBox">
        <br/>
        </span>
    </div>

在CSS中，我将div'菜单'的背景颜色设置为深蓝色，并将span'decorationBox'的背景颜色设置为浅蓝色。我也尝试使用更高的z-index将跨度提升到前面，但它不会显示。是因为跨度在div内吗？

Answer 1

<span>中没有任何“真实”内容，因此不会显示（至少使用默认的CSS设置）。

将display设置为block会使宽度适合父宽度：

→ jsFiddle

span#decorationBox {
    background-color: red;

    /* the default setting is "display: inline" for <span>s */
    display: block;
}

Answer 2

大多数CSS属性无法正常使用span。尝试使用div。

Answer 3

这是因为你的跨度宽度是0px。将内容放在跨度中，您将看到。使用br标记，您在跨度中只有18px的高度。

您可以在范围上添加属性display:block;以查看差异。

该标记用于对文档中的内嵌元素进行分组。

Answer 4

默认情况下，

span是内联标记，它没有宽度或高度属性，因此如果它为空，则无法将其视为粗体或斜体...您可以将span更改为div或赋予块css中的财产：

.decorationBox {
    display:block;
}

Answer 5

<div class="menu">
    <p class="menuHeader">Menu</p>
    <ul class="menuList">
        <li><a href="">Inspiration</a></li>
        <li><a href="">Motivation</a></li>
        <li><a href="">Decision</a></li>
        <li><a href="">Solution</a></li>
        <li><a href="">Action</a></li>
    </ul>

    <span id="decorationBox">
        Content here.
    </span>
</div>

的CSS

div.menu {
    background-color: blue;
}
.menu #decorationBox {
    background-color: red;
    display: block;
}

OR

div.menu{background:blue;}
.menu span{background-color:red;}

实施例。 http://jsfiddle.net/2NwmU/1/

为什么我的跨度与其育儿div保持相同的颜色？

5 个答案: