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

编程问答 2022-04-22

问题描述

我正在使用 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>

解决方法

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

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

由于位置距离视口的左端和右端的距离均为 0，因此上述内容将为其提供 100% 的宽度。 Codepen

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

,

我对你问题的解决方案，希望能帮到你。

    <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>
,

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

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

或移除固定位置

,

尝试将您的导航标签包装在您的 html 中的正文标签中。您将正文宽度设置为 100%，但 HTML 中没有正文标记。

flexboxflexboxhtmljavascriptnavnav