如何編輯列表項的HTML/CSS

Question

我試圖做一個標題：

<ul id="umenu"> 
      <a href="index.html" id="lihome"><li>Home</li></a> 
      <a href="about.html" id="liabout"><li>About</li></a> 
      <a href="contact.html" id="licontact"><li>Contact</li></a> 
     </ul> 

CSS：

#umenu { 
    list-style-type: none; 
    overflow: hidden; 
    margin:0; 
    padding:0; 
} 

#umenu li { 
    float:left; 
    display:block; 
    width:100px; 
    background-color:#dddddd; 
    font-size: 30px; 
} 
#lihome { 
    text-decoration: none; 
} 
#liabout { 
    background-color: #0BE0E0; 
    text-decoration: none; 
} 
#licontact { 
    background-color: #1DE00B; 
    text-decoration: none; 
} 

但是當我使用的是，它只是顯示的紫色和藍色的話（文字飾）和一個灰色的背景（從

#umenu li { 
    float:left; 
    display:block; 
    width:100px; 
    background-color:#dddddd; 
    font-size: 30px; 

我能做些什麼，這樣我可以讓我的頭與更多的風格？

Answer 1

試試這個，

<ul id="umenu"> 
    <li><a href="index.html" id="lihome">Home</a></li> 
    <li><a href="about.html" id="liabout">About</a></li> 
    <li><a href="contact.html" id="licontact">Contact</a></li> 
</ul> 

#umenu { 
    list-style-type: none; 
    overflow: hidden; 
    margin:0; 
    padding:0; 
} 

#umenu li { 
    float:left; 
    display:block; 
    width:100px; 
    background-color:#dddddd; 
    font-size: 30px; 
} 
#lihome { 
    text-decoration: none; 
} 
#liabout { 
    background-color: #0BE0E0; 
    text-decoration: none; 
} 
#licontact { 
    background-color: #1DE00B; 
    text-decoration: none; 
} 

列表的基本結構folows

<UL> 
    <LI> ... first list item... 
    <LI> ... second list item... 
    ... 
</UL> 

更多細節使用W3C Markup Validator會產生

驗證碼

Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.) 

Answer 2

首先，它是要求那你把a裏面的li。

然後，在CSS中，您可以使用li a {}對鏈接進行樣式設置。這是我的建議：

li a { 
    display:block; 
    width:100px; 
    background-color:#ddd; 
    color: darkgrey; 
    font-size:30; 
    text-decoration:none; 
} 

li a:visited { 
color: black; 
text-decoration:none; 
} 

請注意，這使得您不需要使用您當前的li和id語句。

Here's the result