Question

我在尝试移动导航栏下的链接时遇到了麻烦......我不确定问题是什么......它没有动摇。我正在尝试添加边距以稍微移动链接。如果有人能帮助我，我将非常感激！我还尝试在地图下添加其他内容，例如地图，但它根本没有出现在页面上。提前致谢。

CSS：

body {
    margin: 0;
    padding: 0;
    background: pink;
}

@font-face {
    font-family: ProximaNova;
    src: url('Fonts/ProximaNovaA-Regular.ttf');
}


/*---header/banner above the nav bar---*/
.blackbox {
    width: 100%;
    height: 50px;
    background: black;
}

#bag {
    float: right;
    margin-top: -42px; 
    margin-right: 50px;
}

#search {
    float: right;
    margin-top: -40px;
    margin-right: 110px;
    
}

#line {
    float: right;
    margin-top: -39px;
    margin-right: 92px;
}

#accent-shipping {
    background: #00A99D;
    text-align: right;
    color: white;
    margin: 0;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*---nav bar---*/
.navbar {
    overflow: hidden;
    background-color: white;
    width: 100%;
    margin-right: 34px;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 25px 20px;
    text-decoration: none;
    font-family: ProximaNova
}

.menu {
    float: right;
    overflow: hidden;
}

.navbar a:hover, .menu:hover {
    background-color: black;
    color:white;
}

.logo {
    position: absolute;
    margin-left: 25px;
}

p {
    font-family: ProximaNova;
}

/*---links---*/
.links {
    margin-top: 50px;
}


and the HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Sock Factory</title>
    <link href="headerstyles.css" type="text/css" rel="stylesheet">
<!-- add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
</html>

<body>
<!--above nav bar-->
    <div class="blackbox"> </div>
    <img id="search" src="Contacts/search-01.png" width=auto height="30px">
    <img id="line" src="Contacts/line.png" width=auto height="30px">
    <img id="bag" src="Contacts/bag-01.png" width=auto height="35px">
    <a class="logo" href="index.html"><img src="Contacts/logo.png" alt="home" width=auto height="110px"></a>
    <p id="accent-shipping">Free Shipping on all CAN orders</p>
    
<!--nav bar-->
    <div class="navbar">
        <div class="menu">
            <a href="about.html">ABOUT US</a>
            <a href="contact.html">CONTACT</a>
            <a href="shop.html">SHOP</a>
        </div>
    </div>
    
<!--link-->
<div class="links">
    <a href="index.html">Home</a> / <a href="contact.html"><span class="currentLink">Contact</span></a>
</div>

</body>

请忽略丢失的图片： This is what i'm trying to achieve

Answer 1

根据您的图片，我不知道问题在哪里。

使用以下代码

.links {
    margin-top: 50px;
    margin-left: 50px
}

使链接显示在与图像相同的位置：

＆＃13;

body {
    margin: 0;
    padding: 0;
    background: pink;
}

@font-face {
    font-family: ProximaNova;
    src: url('Fonts/ProximaNovaA-Regular.ttf');
}


/*---header/banner above the nav bar---*/
.blackbox {
    width: 100%;
    height: 50px;
    background: black;
}

#bag {
    float: right;
    margin-top: -42px; 
    margin-right: 50px;
}

#search {
    float: right;
    margin-top: -40px;
    margin-right: 110px;
    
}

#line {
    float: right;
    margin-top: -39px;
    margin-right: 92px;
}

#accent-shipping {
    background: #00A99D;
    text-align: right;
    color: white;
    margin: 0;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*---nav bar---*/
.navbar {
    overflow: hidden;
    background-color: white;
    width: 100%;
    margin-right: 34px;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 25px 20px;
    text-decoration: none;
    font-family: ProximaNova
}

.menu {
    float: right;
    overflow: hidden;
}

.navbar a:hover, .menu:hover {
    background-color: black;
    color:white;
}

.logo {
    position: absolute;
    margin-left: 25px;
}

p {
    font-family: ProximaNova;
}

/*---links---*/
.links {
    margin-top: 50px;
    margin-left: 50px
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Sock Factory</title>
    <link href="headerstyles.css" type="text/css" rel="stylesheet">
    <!-- add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
</html>

<body>
    <!--above nav bar-->
    <div class="blackbox"></div>
    <img id="search" src="Contacts/search-01.png" width=auto height="30px">
    <img id="line" src="Contacts/line.png" width=auto height="30px">
    <img id="bag" src="Contacts/bag-01.png" width=auto height="35px">
    <a class="logo" href="index.html"><img src="Contacts/logo.png" alt="home" width=auto height="110px"></a>
    <p id="accent-shipping">Free Shipping on all CAN orders</p>
    
    <!--nav bar-->
    <div class="navbar">
        <div class="menu">
            <a href="about.html">ABOUT US</a>
            <a href="contact.html">CONTACT</a>
            <a href="shop.html">SHOP</a>
        </div>
    </div>
    
    <!--link-->
    <div class="links">
        <a href="index.html">Home</a> 
        /
        <a href="contact.html"><span class="currentLink">Contact</span></a>
    </div>

</body>

＆＃13;

Answer 2

我不是很有经验，但当我遇到类似的问题时，使用填充解决了这个问题。尝试添加一些填充到链接。例如

.links {
    margin-top: 50px;
    padding-top: 50px;
}

我希望它有所帮助。

Answer 3

对不起，我还是新来的，想弄清楚如何发布答案。看起来你的.navbar和.links需要＆＃34;显示：block＆＃34;。如果它们不是块元素，则边缘没有任何东西可以推动＆＃39;

无法在导航栏下移动内容？

3 个答案: