Question

我正在使用Notepad ++制作HTML网页，但导航栏项不会调整其在屏幕上的长度。我真的需要帮助。

这是我的代码：

<head>
<style>
  html {
    height: 100%;
    width: 100%;
  }

  body {
    background-color: #FFE4E1;
    font-family: jokerman, 'times new roman', serif;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
  }

  nav ul {
    display: table;
    width: 99, 5%;
    height: 40px;
    border: #F08080 4px solid;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: center;
  }

  nav ul li {
    text-align: center;
    float: left;
    order: 1;
    display: table-cell;
  }

  nav ul li a {
    display: table-cell;
    position: relative;
    padding-left: 95.85px;
    padding-right: 95.85px;
    line-height: 41px;
    border-right: #F08080 4px solid;
    border-left: #F08080 4px solid;
    text-decoration: none;
    font-size: 20px;
    color: #DAA520;
    background-color: #CD5C5C;
  }

  inline li {
    width: calc(100/5)
  }
</style>
</head>

<body>
  <div style="background-color: peachpuff">
    <div id="Logo" style="background-color: darksalmon">
      <img src="DragonaxeYT.jpg" alt="Logo" width="200">
      <h1>DragonaxeYT.no</h1>
      <nav>
        <ul>
          <li><a href="Dragonaxe-Youtube_1.html">Hjem</a></li>
          <li><a href="Dragonaxe-Youtube_2.html">Kalender</a></li>
          <li><a href="Dragonaxe-Youtube_3.0.html">Blogg</a></li>
          <li><a href="Dragonaxe-Youtube_4.html">Om meg</a></li>
          <li><a href="Dragonaxe-Youtube_5.0.html">Quizer</a></li>
        </ul>
      </nav>
    </div>
  </div>
</body>

希望有人知道如何解决？我希望它能够自我调整，以便该网站在手机上也能正常工作。预先感谢。

Answer 1

使用以下内容更新您的nav ul li和nav ul li a（我注释掉了代码并添加了宽度样式）：

nav ul li{
    text-align: center;
    /*float: left;*/
    order:1;
    display: table-cell;
}
nav ul li a{
    display: table-cell;
    position: relative;
    /*padding-left: 95.85px;*/
    /*padding-right: 95.85px;*/
    line-height: 41px;
    border-right: #F08080 4px solid;
    border-left: #F08080 4px solid;
    text-decoration: none;
    font-size: 20px;
    color: #DAA520;
    background-color: #CD5C5C;

    // New style
    width: 20vw;
}

查看这是Codepen中的操作：https://codepen.io/Tiarhai/pen/WgGPbj

导航栏项目并不适合每个屏幕

1 个答案: