无法在导航栏中放置我的导航栏链接

debugcn 发表于 Dev

金索尔

我正在为一项任务设置一个投资组合页面。我对代码进行了一些更改，现在我的导航栏无法正常工作。由于某种原因，我无法让我的页面链接适合我的实际导航栏，它们位于导航栏下方。

我试过弄乱填充和边距，但这没有做任何事情。它一度运行良好，但我不确定发生了什么变化。

HTML：

<nav>
        <p>STEVEN KANG</p>
        <ul>
            <li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
            <li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
            <li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
         </ul>
        <div class="menu-toggle">
            <a href="javascript:void(0);" class="icon"><i class="fa fa-bars"></i></a>
        </div>
    </nav>

CSS

nav {
    background-color: black;
    height:60px;
    color: #666666;
    position: fixed;
    top:0;
    left:0;
    right:0;
    width: 100%;
}

nav p {
    font-weight: bold;
    margin-top: 25px;
    margin-left: 10px;
    color: white;
    text-align: left;
}

nav a {
    color: red;
}

nav ul {
    margin-bottom: 5em;
}

.rightLinks {
    list-style: none;
    float: right;
    margin-right: 50px;
    margin-left: 15px;
}

那些个人简介、作品集和联系方式链接应位于导航栏内的右侧居中，反映了我的

元素说我的名字。

我觉得这是一个简单的修复，我只是不确定现在出了什么问题。

马特

我看过你的代码。看起来您需要使用浮点数和 clearfix 来实现这一点。

看一看：https : //codepen.io/mrmathewc/pen/OKbXRY

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Steven Kang - Developer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="index.css">
        <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>

<body>
    <nav>
        <div class="float-left">
        <p>STEVEN KANG</p>
        </div>
        <ul class="float-right">
            <li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
            <li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
            <li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
         </ul>
        <div class="menu-toggle">
            <a href="javascript:void(0);" class="icon"><i class="fa fa-bars"></i></a>
        </div>
      <div class="clearfix"></div>
    </nav>
  </body>

CSS：

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

h1 {
    font-family: 'Rubik', sans-serif; 
    font-size: 48px;
}

h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 30px;
}

h3 {
    font-family: 'Karla', sans-serif;
    font-size: 20px;
    color: #0047b3;
    ;
}

p {
    font-family: 'Karla', sans-serif;
    font-size: 16px;
    color: black;
    font-weight: bold;
}

nav {
    background-color: black;
    height:60px;
    color: #666666;
    position: fixed;
    top:0;
    left:0;
    right:0;
    width: 100%;
}

nav p {
    font-weight: bold;
    margin-top: 25px;
    margin-left: 10px;
    color: white;
    text-align: left;
}

nav a {
    color: #0047b3;
}

nav ul {
    margin-bottom: 5em;
}

.rightLinks {
    list-style: none;
    float: right;
    margin-right: 50px;
    margin-left: 15px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clearfix { clear: both; }

不过，我建议您查看 Flexbox，浮动可能会让您头疼。

这是一个基本示例：https : //codepen.io/mrmathewc/pen/wVoWgV

您需要将上述内容扩展到您的代码中。这可能会帮助您更多地了解 Flexbox：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。