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

列表的基本结构如下：

<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

如何编辑列表项html / css

2 个答案: