为什么 justify-content: space-between; 不起作用？

huangapple
go评论93阅读模式
英文:

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

为什么 justify-content: space-between; 不起作用？
should look like this
为什么 justify-content: space-between; 不起作用？
But it looks like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. :root {
  2.   --primary-color: #013456;
  3.   --accent-color: #fad405;
  4. }
  6. .header {
  7.   display: flex;
  8.   justify-content: space-between;
  9.   padding-top: 81px;
  10.   max-width: 1231px;
  11.   margin: 0 auto;
  12.   font-family: &quot;Istok Web&quot;;
  13.   text-align: right;
  14. }
  15. .header span {
  16.   font-weight: 700;
  17.   font-size: 40px;
  18.   margin-right: 10px;
  19.   color: var(--primary-color);
  20. }
  22. .header-title {
  23.   margin: 0;
  24.   display: flex;
  25.   align-items: center;
  26. }
  28. .header .plane-ico {
  29.   color: var(--accent-color);
  30. }
  31. .header-navigation {
  32.   display: flex;
  33.   align-items: center;
  34.   height: 52px;
  35.   margin-right: 5px;
  36. }
  38. .header-navigation a {
  39.   text-emphasis: none;
  40.   margin-left: 29px;
  41.   color: var(--primary-color);
  42.   font-size: 36px;
  43.   font-weight: 500;
  44.   text-decoration: none;
  45. }
  47. .header .menu-ico,
  48. .header .close-ico {
  49.   display: none;
  50. }
  52. .header .close-ico {
  53.   color: var(--accent-color);
  54. }

<!-- language: lang-html -->

  1.  &lt;header class=&quot;header&quot;&gt;
  2.       &lt;h2 class=&quot;header-title&quot;&gt;
  3.         &lt;span&gt;Matt Ridd&lt;/span&gt;
  4.         &lt;i class=&quot;fa fa-lg fa-paper-plane plane-ico&quot;&gt;&lt;/i&gt;
  5.         &lt;nav id=&quot;header-navigation&quot; class=&quot;header-navigation&quot;&gt;
  6.           &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  7.           &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
  8.           &lt;a href=&quot;#&quot;&gt;Books&lt;/a&gt;
  9.           &lt;a href=&quot;#&quot;&gt;Blog&lt;/a&gt;
  10.           &lt;a href=&quot;#&quot;&gt;Home &lt;/a&gt;
  11.         &lt;/nav&gt;
  12.         &lt;i onclick=&quot;toggleMenu(&#39;block&#39;)&quot; class=&quot;fa fa-bars menu-ico&quot;&gt;&lt;/i&gt;
  13.         &lt;i
  14.           onclick=&quot;toggleMenu(&#39;none&#39;)&quot;
  15.           id=&quot;close-ico&quot;
  16.           class=&quot;fa fa-times-circle close-ico&quot;
  17.         &gt;&lt;/i&gt;
  18.       &lt;/h2&gt;
  19.     &lt;/header&gt;

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

huangapple
  • 本文由 发表于 2023年5月11日 18:02:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/76226418.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定