Question

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

我尝试弄乱填充和边距，但是那什么也没做。某一时刻工作正常，但我不确定发生了什么变化。

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;
}

这些生物，投资组合和联系人链接应位于导航栏内的右侧，以反映我的

元素并说出我的名字。

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

Answer 1

我看过你的代码。看来您需要利用浮点数和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/

我的导航栏链接无法容纳在导航栏中

1 个答案: