爲什麼是span元素不是這段代碼

enter image description here

我必須把它分爲三個部分（左，中，右）。

我寫的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？

來源

2011-03-21 Ibrahim Azhar Armar

跨度應該做什麼？使用div時會遇到什麼問題？你想要什麼？ – Bojangles 2011-03-21 13:12:31

@JamWaffles跨度應該連接左右圖像以形成單個導航背景圖像，正如我在圖像中顯示的那樣，我想將其分割爲三個圖像。我在使用div時沒有遇到任何問題。但使用div的一切都沒有錯。在哪裏我可以使用跨度？ – 2011-03-21 13:17:49

噢好的:-)我的錯誤是不理解。我看到你喜歡Yammi的回答;這可能是最好的選擇。 – Bojangles 2011-03-21 13:35:55

一個格是display:block默認情況下，跨度是display:inline默認。寬度和高度不能爲display:inline元素設置。我想推薦使用div。

來源

2011-03-21 13:11:46

我感謝您使用div而不是跨度的建議。如果你有理由，我會很感激。因爲以前的大多數專家都建議我每次都不要使用div。 – 2011-03-21 13:21:05

那麼，有很多人一直都在使用* div *。他們忘記了名單，表格和段落，以及何時應該使用它們。 * span *和* div *用於分組元素 - 和[HTML規範]（http://www.w3.org/TR/html401/struct/global.html#h-7.5.4）明確指出， * span *爲內聯，* div *爲塊級別。因此，如果有人使用* span *並且告訴它表現得像塊級別* div *，那麼您是否同意這證明了對何時使用* div *和* span *有誤解？ – 2011-03-21 13:29:48

也許嘗試設置跨度顯示塊？

來源

2011-03-21 13:08:58 Yammi

是的，這是訣竅... – 2011-03-21 13:18:51

div和span基本上是相同的，除了div默認爲塊級元素，而span沒有。要使其與span一起工作，只需將display: 'block';添加到CSS。

來源

2011-03-21 13:12:07 Nico

-1

我建議用img更換span這樣的：
<img src="img/menu-1.png" alt="" class="nav" /> 和CSS
img.nav{float:left;display:block}

來源

2011-03-21 13:12:14 methyl

由於圖像URL顯然是演示文稿（而不是內容）的一部分，因此應將其放置在CSS中，而不是HTML中。 – 2011-03-21 13:21:52

感謝您的糾正。 – methyl 2011-03-21 13:34:44

一個更整潔的解決方案是使用:after和:before，以完全避免「無用」的HTML：

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

不兼容IE6，但...

來源

2011-03-21 13:31:40 peirix

這看起來非常整齊，除了ie6以外，它可以在所有瀏覽器上運行嗎？ – 2011-03-27 20:03:06

是的，'：after'和'：before'是CSS2.1規範的一部分。 – peirix 2011-03-28 06:37:23

爲什麼是span元素不是這段代碼

回答

相關問題