1

我编写了以下代码，包括一个 div 和一个 span。我希望 div 内的跨度具有不同的颜色，但它似乎不起作用.. 这是 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 'menu' 的背景颜色设置为深蓝色，并将 span 'decorationBox' 的背景颜色设置为浅蓝色。我还尝试使用更高的 z-index 将跨度提升到前面，但它不会显示。是因为跨度在 div 内吗？

4

5 回答 5

3

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

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

→ jsFiddle

span#decorationBox {
    background-color: red;

    /* the default setting is "display: inline" for <span>s */
    display: block;
}
于 2013-11-02T11:12:14.303 回答
1

大多数 CSS 属性不能与 span 一起正常工作。尝试使用 div 代替。

于 2013-11-02T11:14:19.443 回答
0

span默认情况下是一个内联标签，它没有宽度或高度属性，所以如果它是空的，你不能看到它是粗体或斜体......你可以将 span 更改为 div 或在 css 中赋予 block 属性：

.decorationBox {
    display:block;
}
于 2013-11-02T11:16:23.687 回答
0

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

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

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

于 2013-11-02T11:13:02.920 回答
0 
<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;
}

或者

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

前任。http://jsfiddle.net/2NwmU/1/

于 2013-11-02T11:23:06.490 回答