英文:
Why justify-content: space-between; doesn't work?
问题
It seems like you're asking for a translation of the code-related text without the code itself. Here's the translation:
"你知道我哪里犯了错吗？似乎space-between没有起作用。我应该添加额外的内边距来修复它，还是使用不同的显示方法？我一直在按照教程操作，但仍然找不出问题在哪。非常感谢任何建议。"
"应该看起来像这样"
"但实际上是这样的"
英文:
Do you have any idea where did I make a mistake? Seems like space-between doesn't do its job. Should I add additional padding to fix it or use a different display method? I was following a tutorial, but sill can't figure out where is the problem. Would be grateful for any suggestions
should look like this
But it looks like this
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root {
--primary-color: #013456;
--accent-color: #fad405;
}
.header {
display: flex;
justify-content: space-between;
padding-top: 81px;
max-width: 1231px;
margin: 0 auto;
font-family: "Istok Web";
text-align: right;
}
.header span {
font-weight: 700;
font-size: 40px;
margin-right: 10px;
color: var(--primary-color);
}
.header-title {
margin: 0;
display: flex;
align-items: center;
}
.header .plane-ico {
color: var(--accent-color);
}
.header-navigation {
display: flex;
align-items: center;
height: 52px;
margin-right: 5px;
}
.header-navigation a {
text-emphasis: none;
margin-left: 29px;
color: var(--primary-color);
font-size: 36px;
font-weight: 500;
text-decoration: none;
}
.header .menu-ico,
.header .close-ico {
display: none;
}
.header .close-ico {
color: var(--accent-color);
}
<!-- language: lang-html -->
<header class="header">
<h2 class="header-title">
<span>Matt Ridd</span>
<i class="fa fa-lg fa-paper-plane plane-ico"></i>
<nav id="header-navigation" class="header-navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Books</a>
<a href="#">Blog</a>
<a href="#">Home </a>
</nav>
<i onclick="toggleMenu('block')" class="fa fa-bars menu-ico"></i>
<i
onclick="toggleMenu('none')"
id="close-ico"
class="fa fa-times-circle close-ico"
></i>
</h2>
</header>
<!-- end snippet -->
答案1
得分: 2
尝试将 "header-title" 的宽度设置为 width: 100%;，并将 "header" 类中的 justify-content: space-between; 移至 "header-title"，此外 "header-title" 应该是一个 div。
这是一个可运行的示例。
英文:
Try giving "header-title" width: 100%;, and shifting justify-content: space-between; from the "header" class to "header-title", furthermore "header-title" should be a div.
Here's a working example
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论