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

【问题标题】：Can't fit my navbar links inside the navbar无法在导航栏中放置我的导航栏链接
【发布时间】：2019-07-27 07:03:32
【问题描述】：

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

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

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

那些简历、作品集和联系链接应该在导航栏的右侧居中，反映我的

元素说出我的名字。

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

【问题讨论】：

你好 Ginsole，你能通过 jsfiddle 或 codepen 提供一个例子吗？
好吧，忍受我。第一次使用堆栈溢出和codepen。我创建了我的页面的超级准系统版本，但它显示了同样的问题，所以我认为这会起作用。这是链接。 codepen.io/skang28/pen/dxOXYm

标签： html css

【解决方案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/

【讨论】：

感谢您的帮助。所以它看起来确实更好，但是当我使用 display: flex 时，我无法将链接移动到导航栏的右侧？ align-content 和 text-align 似乎没有做任何事情。我可以使用什么？
因此，例如，当您有两个 div 并且包含它们的父 div 都分配了 display: flex; 时，您只想在父级上添加 justify-content: space-between; ，这会将两个元素相互推开在容器允许的范围内。
好的，成功了！我必须将它应用于父级而不是实际的 ul。谢谢！
没问题，很高兴它成功了！ :) 作为旁注，请确保在您的代码中添加其他浏览器支持。 Autoprefixer (autoprefixer.github.io) 应该可以帮助你。如果对您有用，请将我的答案标记为正确:)