Question

我是HTML CSS和JS的新手，我正在创建一个网站并且已经出现问题几天了，我创建了一个导航不好以在页面之间切换但我似乎无法正确定位在左上角我想知道是否有人可以提供帮助。我希望它完全位于左上角，但它似乎不合适。我尝试了很多解决方案，但似乎无法得到我想要的结果。

body {
        margin-left: 50px;
        margin-right: auto;
        background-color:     
        font-family: Arial, Helvetica, sans-serif;
        width: 800px;
    
        }
    
        .topnav {
        background-color: #333;
        overflow: hidden;  

        }
    
    
        .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 20pt;
        }
    
    
        .topnav a:hover {
        background-color: #ddd;
        color: black;
        }
    
    
        .topnav a.active {
        color: white;
        }
    
        html {
        background: url(UFC.jpg);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;   
        }

<!DOCTYPE html>
<html>
     <head>
       <link rel="stylesheet" type="text/css" href="website.CSS">
     </head>
     <body>
        <div class="topnav">
       `enter code here` <a class="active" href="home.html"><u>Home</u></a>
        <a href="topfighters.html"><u>Top Fighters</u></a>
        <a href="bestknockouts.html"><u>Best Knockouts</u></a>
        <a href="contactpage.html"><u>Contact Page</u></a>
        <a href="https://twitter.com/ItsssOwen">
        <img src="twitter%20link.png"  width="42" height="32" border="0">
        </a>
        </div>
     </body>
</html>

Answer 1

您可以使用css位置修改元素的位置，指定顶部，左侧，右侧，底部位置（仅需要一个x和一个y）。

body {
        margin-left: 50px;
        margin-right: auto;
        background-color:     
        font-family: Arial, Helvetica, sans-serif;
        width: 800px;
    
        }
    
        .topnav {
        background-color: #333;
        overflow: hidden;  
        position: fixed;
        top: 0;
        left: 0;
        }
    
    
        .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 20pt;
        }
    
    
        .topnav a:hover {
        background-color: #ddd;
        color: black;
        }
    
    
        .topnav a.active {
        color: white;
        }
    
        html {
        background: url(UFC.jpg);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;   
        }

<!DOCTYPE html>
<html>
     <head>
       <link rel="stylesheet" type="text/css" href="website.CSS">
     </head>
     <body>
        <div class="topnav">
       `enter code here` <a class="active" href="home.html"><u>Home</u></a>
        <a href="topfighters.html"><u>Top Fighters</u></a>
        <a href="bestknockouts.html"><u>Best Knockouts</u></a>
        <a href="contactpage.html"><u>Contact Page</u></a>
        <a href="https://twitter.com/ItsssOwen">
        <img src="twitter%20link.png"  width="42" height="32" border="0">
        </a>
        </div>
     </body>
</html>

但问题是您指定了

 margin-left: 50px;

为你的身体，导致元素向右移动50 px，你可以通过删除它来达到它：

body {
        background-color:     
        font-family: Arial, Helvetica, sans-serif;
        width: 800px;
    
        }
    
        .topnav {
        background-color: #333;
        overflow: hidden;  

        }
    
    
        .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 20pt;
        }
    
    
        .topnav a:hover {
        background-color: #ddd;
        color: black;
        }
    
    
        .topnav a.active {
        color: white;
        }
    
        html {
        background: url(UFC.jpg);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;   
        }

<!DOCTYPE html>
<html>
     <head>
       <link rel="stylesheet" type="text/css" href="website.CSS">
     </head>
     <body>
        <div class="topnav">
       `enter code here` <a class="active" href="home.html"><u>Home</u></a>
        <a href="topfighters.html"><u>Top Fighters</u></a>
        <a href="bestknockouts.html"><u>Best Knockouts</u></a>
        <a href="contactpage.html"><u>Contact Page</u></a>
        <a href="https://twitter.com/ItsssOwen">
        <img src="twitter%20link.png"  width="42" height="32" border="0">
        </a>
        </div>
     </body>
</html>

导航栏定位左上角

1 个答案: