为什么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

一个格是display:block在默认情况下,一个跨度为display:inline默认.无法为display:inline元素设置宽度和高度.

我建议使用一个div.

Answer 2

也许尝试设置跨度显示块？