我的文本未在表格右側對齊。為什么？

我正在嘗試為我的導航欄對齊表格中的文本和影像。有兩列。問題是左列（“ NavAccueil ”類）上的文本和影像在左側對齊（至少看起來像），但右列（“ NavWarp ”）上的文本未在右側對齊我的桌子。我不知道為什么。這是代碼（這可能很糟糕，我是新手）

#BarreNavigation {
  position: sticky;
  top: 0;
  background-image: url("../Assets/Images/CounterStrike3.png");
  background-size: cover;
  background-position: top;
  width: 100%;
  max-height: fit-content;
  z-index: 1;
  margin: 0 auto;
  border-style: solid;
  border-color: #a58e188e;
  border-width: 0.5vh;
  border-radius: 1vh;
  text-align: center;
  font-size: 3.5vh;
  font-family: "Mono";
}

#BarreNavigation a {
  color: #ffffff;
  transition: text-shadow 250ms ease;
  text-shadow: 2px 2px 3px #000000;
  text-decoration: none;
  padding-left: 2vh;
  padding-right: 2vh;
}

#BarreNavigation a:hover {
  text-shadow: 2px 2px 3px #ff7300;
}

.NavAccueil {
  width: 40%;
  text-align: left;
  text-shadow: none;
  filter: drop-shadow(2px 2px 3px black);
  transition: filter 250ms ease;
}

.NavAccueil :hover {
  filter: drop-shadow(2px 2px 3px #ff7300)
}

.NavAccueilIcon {
  width: 4vh;
  vertical-align: -10%;
  padding-right: 1vh;
}

.NavWarp {
  width: 60%;
}

.NavWarpText {
  background-color: rgba(49, 39, 10, 0.411);
  border-radius: 0.5vh;
}

<div id="BarreNavigation">
  <table>
    <tr>
      <td class="NavAccueil">
        <a href="Index.htm"><img src="Assets/Images/IconSite/Accueil.png" class="NavAccueilIcon">Accueil</a>
      </td>
      <td class="NavWarp">
        <a href="#Presentation" class="NavWarpText">Presentation</a>
        <a href="#ModesJeu" class="NavWarpText">Modes De Jeu</a>
        <a href="#Cartes" class="NavWarpText">Les Cartes</a>
      </td>
    </tr>
  </table>
</div>

另外，我有一個問題，右側“框”中的文本在寬度不夠時就像被剪切，所以它們被剪切，框內的一部分文本留在頂部，另一部分放在導航欄的底部，所以盒子就像被剪掉了。

無論如何，這是另一個問題。因此，如果有人知道如何在右側對齊該文本，我很樂意向您學習。

uj5u.com熱心網友回復：

table 默認情況下，僅與其內容一樣寬。

添加

table { table-layout: fixed; min-width: 100%; }

table { table-layout: fixed; min-width: 100%; }

#BarreNavigation {
  position: sticky;
  top: 0;
  background-image: url("../Assets/Images/CounterStrike3.png");
  background-size: cover;
  background-position: top;
  width: 100%;
  max-height: fit-content;
  z-index: 1;
  margin: 0 auto;
  border-style: solid;
  border-color: #a58e188e;
  border-width: 0.5vh;
  border-radius: 1vh;
  text-align: center;
  font-size: 3.5vh;
  font-family: "Mono";
}

#BarreNavigation a {
  color: #ffffff;
  transition: text-shadow 250ms ease;
  text-shadow: 2px 2px 3px #000000;
  text-decoration: none;
  padding-left: 2vh;
  padding-right: 2vh;
}

#BarreNavigation a:hover {
  text-shadow: 2px 2px 3px #ff7300;
}

.NavAccueil {
  width: 40%;
  text-align: left;
  text-shadow: none;
  filter: drop-shadow(2px 2px 3px black);
  transition: filter 250ms ease;
}

.NavAccueil :hover {
  filter: drop-shadow(2px 2px 3px #ff7300)
}

.NavAccueilIcon {
  width: 4vh;
  vertical-align: -10%;
  padding-right: 1vh;
}

.NavWarp {
  width: 60%;
}

.NavWarpText {
  background-color: rgba(49, 39, 10, 0.411);
  border-radius: 0.5vh;
}

<div id="BarreNavigation">
  <table>
    <tr>
      <td class="NavAccueil">
        <a href="Index.htm"><img src="Assets/Images/IconSite/Accueil.png" class="NavAccueilIcon">Accueil</a>
      </td>
      <td class="NavWarp">
        <a href="#Presentation" class="NavWarpText">Presentation</a>
        <a href="#ModesJeu" class="NavWarpText">Modes De Jeu</a>
        <a href="#Cartes" class="NavWarpText">Les Cartes</a>
      </td>
    </tr>
  </table>
</div>

標籤：

上一篇：D3.js樣式和類覆寫不能按我的預期作業

下一篇：如果父div具有特定的類，則使用JS切換另一個div