1. 首頁
  2. 問答
  3. 在列表標籤​​之間放置DIV標籤有效嗎？

在列表標籤​​之間放置DIV標籤有效嗎？

2013-08-30 63 views
0

是否這樣？在列表標籤​​之間放置DIV標籤有效嗎？

<li>Menu1</li><div></div> 
<li>Menu2</li><div></div>

我這樣做的原因是使用CSS來設置div的樣式來製作帶有漸變的分隔符。

來源

2013-08-30 user1209203

+1

也許可以添加空li標籤，並且您可以爲其添加樣式 –

+0

否 - @ user1209203爲什麼需要添加它們？如果你想要一些風格，只需添加一個'span'並使其成爲'display：block;'給它一個div的特徵。 – Nitesh

+0

我只是使用圖像背景，我希望只使用CSS – user1209203

回答

2

沒有。您可以檢查自己的位置：http://validator.w3.org/

您可能能夠得到使用CSS僞元素::after，這取決於你如何造型你<li>提供了一個類似的結果。

E.g.

li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
} 

li::after { 
    display: inline-block; 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background: #000; 
}

根據需要應用梯度的背景。

請注意，要支持IE8，您需要使用舊語法:after，而IE 7根本不支持此僞元素。

來源

2013-08-30 10:46:20

+0

這是一個非常整潔的解決方案，我可以避免將僞元素添加到最後一個列表項，但？ – user1209203

+1

這個作品李：不（：最後孩子）::之後 – user1209203

+0

@ user1209203：是的，點上。請注意，IE8不支持'：not（）'。如果你想支持IE8，你可以使用'：before'而不是':: after'，並且添加'li：first-child：before {display：none;}'（我認爲）。 –

1

不！檢查它：http://validator.w3.org/

編輯驗證此程序，看看它是不是有效的：

<!doctype html> 
<html lang="en"> 

    <head> 
     <meta charset="UTF-8"> 
     <title>Document</title> 
    </head> 

    <body> 
     <ul> 
      <li>Menu1</li> 
      <div></div> 
      <li>Menu2</li> 
      <div></div> 
     </ul> 
    </body> 

</html>

來源

2013-08-30 10:48:05

+1

這在所有瀏覽器中都沒有任何問題？ –

+2

工作沒有任何問題，這並不意味着它應該使用;） – everydayghost

+0

@StefanBrendle：總是？在所有情況下？沒有問題嗎？瀏覽器之間完全一致？你確定？ –

1

您更好地使用這樣的， 

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 

<body> 
    <ul> 
     <li>Menu1</li> 
     <li><div></div></li> 
     <li>Menu2</li> 
     <div></div> 
    </ul> 
</body>

來源

2013-08-30 13:34:04 vadlamani

相關問題

 相關問題