justify-self屬性在引導程式的導航欄中不起作用-有解無憂

我在這里有一個基本的引導標題： justify-self 屬性在引導程式的導航欄中不起作用

uj5u.com熱心網友回復：

如果有三個元素，那么在父級中只需使用

#navbar {
justify-content: center;
}

但我看到你有 display:none 最后一項，所以要解決這個問題，在中間一項上使用這個屬性。

#play-button {
margin: 0 auto;
}

它將居中，但在空間的其余部分不在導航欄中

uj5u.com熱心網友回復：

您可以通過使用 text-align 屬性來簡單地實作這一點......下面是代碼

#play-button{
   text-align: center;
}

#login-button{
   text-align: end;
}

uj5u.com熱心網友回復：

一個簡單的修復

justify-self實際上正在按預期作業。問題在于應用于登錄按鈕的 css。它設定為display:none，因此寬度為零。其他導航專案向右流動以填充空間。要隱藏按鈕但保持對齊，簡單的解決方法是將其更改為visibility: hidden，這會隱??藏按鈕而不是它包含的空間。

#login-button{
  justify-self: flex-end;
   /* display: none;  REMOVE */
  visibility: hidden;
}

此外，大部分自定義 css 都不需要，因為它可以使用現有的 Bootstrap 類來完成。檔案的幫助器和實用程式部分下有flex、border radius、spacing、visibility等類。

#navbar {
  background-color: rgba(191, 191, 191, 255);
  height: 3vh;
  border-radius: 0px 0px 20px 20px;
  padding-bottom: 45px;
}

#play-button{
  justify-self: center;
}

#login-button{
  justify-self: flex-end;
   /* display: none; */
  visibility: hidden;
}

<nav class="navbar navbar-light" id="navbar">
  <a class="navbar-brand"
    routerLink="home">
    <img src="https://jaumesegarra.github.io/minesweeper/favicon.ico" width="40vw" height="40vh">
  </a>
  <div class="navbar-nav" id="play-button">
    <a class="nav-item nav-link"
      routerLink="minesweeper">
      <h2>Play</h2>
    </a>
  </div>
  <span class="navbar-nav" id="login-button">
    <a class="nav-item nav-link"
      routerLink="login">
      <h5>Log In</h5>
    </a>
  </span>
</nav>


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/474262.html

標籤：html css 弹性盒

上一篇：表單輸入復選框和檔案型別不起作用

下一篇：CSS選擇器有什么區別：元素元素（divp）與元素>元素（div>p）？[復制]