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

Answer 2

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

Answer 3

更简洁的解决方案是使用:after和:before来完全避免“无用的”HTML：

#navigation:before { content: url('../img/menu-1.png'); }
#navigation:after  { content: url('../img/menu-2.png'); }

不兼容IE6 ......

Answer 4

div和span基本相同，除了div默认为块级元素而span不是。要使其与span一起使用，只需将display: 'block';添加到CSS。

Answer 5

我建议将span替换为img，如下所示：
<img src="img/menu-1.png" alt="" class="nav" /> 在css中 img.nav{float:left;display:block}