有没有办法让文本正常工作？答案

【问题标题】：Is there a way to make the text works normally?有没有办法让文本正常工作？
【发布时间】：2021-11-20 23:23:32
【问题描述】：

所以我正在尝试为服务器用户订购东西制作一个简单的网站。但是现在我遇到了一个会影响导航器文本的问题。

正如您在下面的代码中看到的那样，后退按钮上方应该有一个导航文本，并且下面的类别按钮也应该像上面的后退和价格按钮一样显示，因为它们是相同的代码。

我尝试了其他方法，但它超出了我的编码范围，所以我决定在 Google 上查找，但没有找到任何有用的解决方案。

这真的可以解决吗？

结论：问题

“导航器”文本在 100% 缩放视图时消失
类别按钮不能像上面的按钮那样显示（代码与上面的按钮相同，但 ID 不同）

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: solid 2px #ffffff;
  overflow-y: scroll;
}

.nav::-webkit-scrollbar {
  display: hidden;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin-bottom: 50px;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

.store {
  padding: 0 99.5px 0 99.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.prices {
  padding: 0 93.5px 0 93.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Woods {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Stones {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Brewing {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Enchanting {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Color {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Nether {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Redstone {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

<main>
  <div class="title">
    <t1>MineGlobe | IchorDragon's Store</t1>
  </div>
</main>

<nav>

  <div id="navigator">
    <p class="navigator">Navigator</p>

    <div>
      <button class="store"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="prices"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  <div id="category">
    <p class="navigator">Select Category</p>

    <div>
      <button class="Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
      <button class="Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
      <button class="ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
      <button class="Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
      <button class="Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
      <button class="Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
      <button class="Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
      <button class="Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
    </div>
  </div>

</nav>

【问题讨论】：

你能创建一个小提琴来演示这个问题吗？
有点不清楚你想要什么。 “行为正常”是什么意思？
您应该为您的页面聘请设计师，或者通读developer.apple.com/design/human-interface-guidelines 和material.io 并练习他们所教的内容。

标签： html css

【解决方案1】：

老实说，我无法解释所做的所有更改，太多了。我的尝试是清理您的代码并为您提供一个工作布局（希望这就是您要寻找的）。

在 2021 年，与固定菜单（例如网格）相比，有更好的布局，它们的响应性更好，更干净。但这需要您进行深入研究。

body {
    background-color: #444444;
}
main {
    width: 100%;
    padding-left: 302px;
    box-sizing: border-box;
    overflow:hidden;
  
    color: #66d4ff;
    background-color: #444444;
    font-size: 20px;
    
}

.title {
    padding: 50px;
    
    border: solid 10px #66d4ff;
    
    font-size: 62px; 
    text-align: center;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    
    background-color: #4a4a4a;
    border-right: solid 2px #ffffff;
    overflow-y: scroll;
    
    color: #66d4ff;
}


.navigator {
    display: block;
    margin-bottom: 50px;
    
    font-size: 35px;
    text-align: center;
}


button {
    width:96%;
    margin: 10px auto;
    
    background: #444444;
    
    color: #66d4ff;
    font-size: 30px;
    font-family: 'Times New Roman', Times, serif;
    
    cursor:pointer;
}

<body>

  <main>
    <div class="title">
      <t1>MineGlobe | IchorDragon's Store</t1>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> This is a long page content...
    <br/>
  </main>

  <nav>

    <div id="navigator">
      
      <p class="navigator">Navigator</p>

      <div>
        <a href="store.html" class="store" style="text-decoration: none;"><button>Back</button></a>
        <a href="prices.html" class="prices" style="text-decoration: none;"><button>Prices</button></a>
      </div>
      
    </div>



    <div id="category">
    
      <p class="navigator">Select Category</p>

      <div>
        <button class="Woods items" onclick="document.getElementById('Woods').scrollIntoView();">Woods</button>
        <button class="Stones items" onclick="document.getElementById('Stones').scrollIntoView();">Stones</button>
        <button class="ArmorsWeapon items" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();">Armors & Weapons</button>
        <button class="Brewing items" onclick="document.getElementById('Brewing').scrollIntoView();">Brewing</button>
        <button class="Enchanting items" onclick="document.getElementById('Enchanting').scrollIntoView();">Enchanting</button>
        <button class="Color items" onclick="document.getElementById('Color').scrollIntoView();">Color</button>
        <button class="Redstone items" onclick="document.getElementById('Redstone').scrollIntoView();">Redstone</button>
        <button class="Nether items" onclick="document.getElementById('Nether').scrollIntoView();">Nether</button>
      </div>
      
    </div>


  </nav>

</body>

【讨论】：

谢谢，但是当我将它们复制到 css 中进行测试时，按钮（后退和价格）无法变为蓝色（#66d4ff）

【解决方案2】：

“导航器”文字消失：这是因为justify-content: center;上的nav
即使使用display: block (more information)，按钮的宽度也不会达到 100%，因此需要添加。请注意，由于所有类别都有相同的代码，因此单个类就足够了。

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  border-right: solid 2px #ffffff;
  overflow-y: scroll;
}

.nav::-webkit-scrollbar {
  display: hidden;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin-bottom: 50px;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

.store {
  padding: 0 99.5px 0 99.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.prices {
  padding: 0 93.5px 0 93.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.category {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 100%;
}

<main>
  <div class="title">
    <t1>MineGlobe | IchorDragon's Store</t1>
  </div>
</main>

<nav>

  <div id="navigator">
    <p class="navigator">Navigator</p>

    <div>
      <button class="store"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="prices"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  <div id="category">
    <p class="navigator">Select Category</p>

    <div>
      <button class="category Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
      <button class="category Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
      <button class="category ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
      <button class="category Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
      <button class="category Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
      <button class="category Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
      <button class="category Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
      <button class="category Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
    </div>
  </div>

</nav>

【讨论】：