Question

到目前为止，我的编码非常简单。我最右边的联系人链接似乎上升了，它在我的其他链接之上产生了一个额外的区域，作为一个链接区域。我检查了我的CSS，一切看起来都不错，但我很新，所以它可能很简单。这是代码：

HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Derek Edwards Portfolio</title>
<link href="Web Porfolio.css" rel="stylesheet" type="text/css" />
</head>

<body class="mainbody">

<nav>
    <p>
        <ul class="navbar">
            <li class="listitem"><a href="#"/>Contact</li>
            <li class="listitem"><a href="#"/>Portfolio</li>
            <li class="listitem"><a href="#"/>About</li>
            <li class="listitem"><a href="#"/>Home</li>
        </ul>
    </p>

</nav>
</body>
</html>

我的css也很简单：

   @charset "utf-8";

.mainbody {
margin:0px;
padding:0px;
background-image:url(../../Desktop/Portfolio/Background.jpg);
background-size:100%;
background-attachment:fixed;
}

.navbar {
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.4;
}

.listitem {
float: right;
border-left: 1px solid #bbb;
list-style-type: none;  
}

.listitem a {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
display: block;
color: white;
text-align: center;
padding: 10px 5px;
text-decoration: none;
}

.listitem a:hover {
    background-color: #111;
}

Answer 1

在“.listitem a”中，它应该是

display: inline-block;

这将解决它。您的代码中有一些可疑的决定，但会解决您的问题。

联系链接在其他链接上升

1 个答案: