Question

我有3个链接在html中作为列表设置，我在CSS中使用这些代码将它们放在一起：

li
{
    float:left;
    margin-right:15px;
    margin-top:40px;
}

但是当我点击其中一个时，右边的另一个链接朝我点击的那个方向移动。我不知道发生这种情况的原因。但是如何修复它们呢？

代码:: HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp"><a href="">Symptoms</a></li>
<li class="links1" id="doc"><a href="">Doctors</a></li>
<li class="links1" id="health"><a href="">Health Care Reform</a></li>

</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>

</body>

</html>

CSS：

html
{
    background-image:linear-gradient(to top, white, #F5F9FA);
    height:100%;
}
.logo
{
    padding-left:176px;
    padding-top:4px;
    float:left;
}
 li
{
    float:left;
    margin-right:15px;
    margin-top:40px;
    font-family:Candara;
    font-size:12px;
    color:#5895D4;
}

#symp
{
    list-style-image:url(walking.png);
    margin-left:55px;
}
#doc
{
    list-style-image:url(doc.png);
}
#health
{
    list-style-image:url(umb.png);
}
li a
{
    color:#5895D4;
    text-decoration:none;
}
li a:hover
{
    text-decoration:underline;
}
li a:active
{
}
li a:visited
{

}

Answer 1

目前，CSS选择li，而非li a。

如果您的HTML结构如下所示：

<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>

尝试使用以下CSS定位每个li内的链接。

li a {
    float: left;
    margin-right: 15px;
    margin-top: 40px;
}

您的错误可能发生的原因是因为a::visited是与li分开的元素。 See MDN's page on :visited.

点击时链接被移动（CSS）？

1 个答案: