Question

所以在我遇到每个按钮之间的空间问题之前。现在有这个恼人的问题。我有四个按钮，但只有前三个按钮出现。为什么不是FAQ按钮？这让我烦恼。如果这是一个问题，那么我将为3个按钮创建一个html代码，然后为FAQ按钮单独创建一个。我觉得它很奇怪，因为在我没有问题之前。我尝试从CSS和HTML中删除FAQ代码，然后重新粘贴它，但它给了我相同的结果。

<!CASCADE STUDIOS COPY AND YOU WILL BE CAUGHT">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">
.helpicon a#editinfo{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/editinfo.png) no-repeat;
}

.helpicon a:hover#editinfo{
    background: url(http://icpy.webs.com/button/editinfo0.png) no-repeat;
}
.helpicon a#codes{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/codes.png) no-repeat;
}

.helpicon a:hover#codes{
    background: url(http://icpy.webs.com/button/codes0.png) no-repeat;
}
.helpicon a#music{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/music.png) no-repeat;
}

.helpicon a:hover#music{
    background: url(http://icpy.webs.com/button/music0.png) no-repeat;

.helpicon a#faq{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/FAQ.png) no-repeat;
}

.helpicon a:hover#faq{
    background: url(http://icpy.webs.com/button/FAQ0.png) no-repeat;
}
}
.helpicon a{
  margin: 4px;
  }
</style>

<body>

<div class="helpicon">
<a href="http://www.twitter.com" id="editinfo"/>
<a href="http://www.twitter.com" id="codes"/>
<a href="http://www.twitter.com" id="music"/>
<a href="http://www.twitter.com" id="faq"/>
</div>
</body>

Answer 1

使用<a>代码

的正确语法

<a href="http://www.twitter.com" id="editinfo"></a>
<a href="http://www.twitter.com" id="codes"></a>
<a href="http://www.twitter.com" id="music"></a>
<a href="http://www.twitter.com" id="faq"></a>

css中有一个缺少的括号

<!CASCADE STUDIOS COPY AND YOU WILL BE CAUGHT">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">
.helpicon a#editinfo{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/editinfo.png) no-repeat;
}

.helpicon a:hover#editinfo{
    background: url(http://icpy.webs.com/button/editinfo0.png) no-repeat;
}
.helpicon a#codes{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/codes.png) no-repeat;
}

.helpicon a:hover#codes{
    background: url(http://icpy.webs.com/button/codes0.png) no-repeat;
}
.helpicon a#music{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/music.png) no-repeat;
}

.helpicon a:hover#music{
    background: url(http://icpy.webs.com/button/music0.png) no-repeat;
}
.helpicon a#faq{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/FAQ.png) no-repeat;
}

.helpicon a:hover#faq{
    background: url(http://icpy.webs.com/button/FAQ0.png) no-repeat;
}

.helpicon a{
  margin: 4px;
  }
</style>

<body>

<div class="helpicon">
<a href="http://www.twitter.com" id="editinfo"></a>
<a href="http://www.twitter.com" id="codes"></a>
<a href="http://www.twitter.com" id="music"></a>
<a href="http://www.twitter.com" id="faq"></a>
</div>
</body>

Answer 2

您错过了此部分的结束}：

.helpicon a:hover#codes{
    background: url(http://icpy.webs.com/button/codes0.png) no-repeat;

其他按钮将无法正确显示CSS

2 个答案: