html - 为什么 span 元素不适用于这段代码

Question

我有一个导航菜单，如下所示:

我必须将它分成三部分(左、中、右)。

我写了这样的 html 和 css 代码:

<span id="nav-left-img"></span>
    <ul id="navigation">
        <li>Home</li>
        <li>About Us</li>
        <li>Products</li>
        <li>Contact Us</li>
    </ul>
<span id="nav-right-img"></span>

这是CSS:

ul#navigation
{
    background: url('../img/menu-c.png') repeat-x;
    height: 45px;
    clear: both;
    width: 420px;
}
ul#navigation li
{
    float: left;
    text-align: center;
    width: 100px;
    padding-top: 10px;
}
#nav-left-img
{
    background: url('../img/menu-l.png') no-repeat;
    height: 45px;
    width: 10px;
}

span 似乎不起作用；如果我使用 div 它会起作用。代码可能有什么问题？我可以使用 div 而不是 span 还是应该坚持使用 div 来连接左右图像？我如何使用 span 做到这一点？

Answer 1

一个div默认是display:block，一个span默认是display:inline。不能为 display:inline 元素设置宽度和高度。

我建议使用 div。