如何解决我正在尝试使用 flex css 将我的链接放在屏幕的右侧,但它在左侧带有标题
我正在使用 flex CSS 创建一个导航栏。我的问题是我希望链接位于屏幕右侧,但它们位于左侧和标题旁边,这是我不想要的。我尝试过 margin-left: auto,但它不起作用。这个问题有不同的解决方案吗?下图:
这是我的代码:
@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 中没有正文标记。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。