英文:
How can I pull my last flex box child to the right?
问题
你的代码看起来很不错，但是你想要的效果可能需要一些额外的调整。希望这个CSS代码对你有帮助：
.navLinks {
display: flex;
justify-content: space-between;
}
.navItem {
flex: 1;
}
.navLinks::after {
content: ""; /* 添加一个空元素作为占位符 */
flex-grow: 2; /* 让占位符占据剩余的空间 */
}
希望这能帮助你得到想要的布局。
英文:
I've got a navbar, and I want to space the links evenly across the bar.
This is my HTML
<nav class="mainAddressBar">
<ul class='navLinks'>
<li class="navItem"><a href="index.html">Home</a></li>
<li class="navItem"><a href="about.html">About Us</a></li>
<!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
<li class="navItem"><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS:
.navLinks {
display: flex;
justify-content: space-between;
/*padding-left: 10em;*/
}
.navItem {
flex: 1;
}
.navItem:last-child{
margin-left: auto;
}
This is the output:
enter image description here
I am wanting the contact button to be all the way to the right.
I have tried splitting the navbar into two sections, with the first two links in one div and the contact link in the second div, and using justify-content:space-around. I've always attempted to use
.navItem:last-child{
margin-left: auto;
}
I have been able to maintain the spacing and move the contact link further right, but not quite where it needs to be.
答案1
得分: 2
.navItem 上有 flex:1，.navItem 将填充容器，所以最后一个 .navItem 已经被推到右边。
你可以更改 text-align 或者不在最后一个子元素上设置 flex:1。
.navLinks {
display: flex;
justify-content: space-between;
/*padding-left: 10em;*/
}
.navItem:not(:last-child) {
flex: 1;
}
.navItem:last-child {
margin-left: auto;
}
<nav class="mainAddressBar">
<ul class='navLinks'>
<li class="navItem"><a href="index.html">Home</a></li>
<li class="navItem"><a href="about.html">About Us</a></li>
<!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
<li class="navItem"><a href="contact.html">Contact</a></li>
</ul>
</nav>
英文:
There is flex:1 on .navItem, the .navItem will fill the container, so the last .navItem is already been push to the right.
You can change text-align or dont set flex:1 on last child.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.navLinks {
display: flex;
justify-content: space-between;
/*padding-left: 10em;*/
}
.navItem:not(:last-child) {
flex: 1;
}
.navItem:last-child {
margin-left: auto;
}
<!-- language: lang-html -->
<nav class="mainAddressBar">
<ul class='navLinks'>
<li class="navItem"><a href="index.html">Home</a></li>
<li class="navItem"><a href="about.html">About Us</a></li>
<!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
<li class="navItem"><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- end snippet -->
答案2
得分: 0
你可以尝试在最后一个子元素中使用“text-align: right;”。
英文:
You can try “text-align: right;” in that last child.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论