我正在尝试使用 flex css 将我的链接放在屏幕的右侧，但它位于带有标题的左侧

Question

我正在使用 flex CSS 创建导航栏。我的问题是我希望链接位于屏幕的右侧，但它们位于左侧和标题旁边，这是我不想要的。我试过 margin-left: auto，但它不起作用。这个问题有不同的解决方案吗？下图：

Image of Navbar

这是我的代码：

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/*
font-family: 'Poppins', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
*/

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
}

nav {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-content: center;
  background-color: transparent;
}

.name-title {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: xx-large;
  color: #000;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10px;
}

nav li {
  list-style: none;
}

nav a {
  font-family: "Poppins", sans-serif;
  font-size: medium;
  padding-right: 2em;
  text-decoration: none;
  color: #000;
}

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav>
  <div class="name-title">Ayush Kumar</div>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Answer 1

position: fixed; 导致了这个问题。如果您真的想使用它，请添加更多描述位置的详细信息。

nav {
  position: fixed;
  left: 0;
  right: 0;
}

由于位置距视口左右两端的距离均为 0，因此上面的代码将为其提供 100% 的宽度。 Codepen

否则你也可以删除 position:fixed。

Answer 2

我对你问题的解答，希望能帮到你。

    <style>
            .main-nav {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
            .navbar {
                display: flex;
                flex-direction: row;
                list-style: none;
            }
    
            .navbar li {
                padding-right: 5px;
            }
        </style>
        <body>
            <nav class="main-nav">
    
                <h1>Name</h1>
                <ul class="navbar">
                    <li>
                        link A
                    </li>
                    <li>
                        link B
                    </li>
                    <li>
                        link C
                    </li>
                </ul>
            </nav>
    </body>

Answer 3

只需添加宽度：100%；导航

 nav {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    align-content: center;
    background-color: transparent;
    width: 100%;
}

或移除固定位置

Answer 4

尝试将导航标签包裹在 html 的 body 标签中。您将 body 宽度设置为 100%，但 HTML.

中没有 body 标签

我正在尝试使用 flex css 将我的链接放在屏幕的右侧，但它位于带有标题的左侧

I am trying to put my links on the right side of the screen using flex css, but its on the left side with the title

html

javascript

css

nav

flexbox