如何编辑列表项 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

首先，必须将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

Answer 2

试试这个，

<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;
}

列表的基本结构如下

<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.)