如何使用媒体查询为响应式网页设计制作垂直导航栏（菜单）？

Question

我首先为朋友创建了一个网站的桌面版本，因此，为了使该网站更有组织性以供移动使用，我一直在使用媒体查询。但是我不知道如何垂直组织导航栏。而且，我也不知道如何使博客的内容部分本身不水平滚动。

下面是两张图片（忽略网站上的葡萄牙语）：

这个展示了导航栏如何不是垂直方向的。

如果你注意的话，这个显示了网页如何滚动到一侧，这是我不希望发生的。

现在，这是该特定页面的 HTML 代码：

<body>
    <a href="index.html"><h1 class="title">thrumilieyes</h1></a>
    <ul id="nav">
      <li><a href="colagens.html">Colagens</a></li>
      <li><a href="resenhas.html">Resenhas</a></li>
      <li><a href="miscelanea.html">Miscelânea</a></li>
      <li><a href="how-to.html">How to</a></li>
      <li><a href="tudo.html">Tudo</a></li>
    </ul>
    <h3 class="box-title">Miscelânea</h3>
    <div class="main-box">
      <h3 class="post-title">Bocas</h3>
      <p class="time">Postado 12/12/2023 às 17:15</p>
      <p class="post">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A reiciendis
        eius inventore exercitationem sed sit obcaecati voluptates iure ipsam!
        Cum sapiente quod doloribus suscipit, odit accusamus iusto commodi eum
        dolores aut quaerat impedit ex culpa doloremque incidunt aperiam odio
        sit, ipsam magnam. Unde assumenda molestiae maiores libero natus ab
        quae.
      </p>
    </div>
  </body>

还有 CSS：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: maybe;
}
@font-face {
  font-family: maybe;
  src: url(RobotoSlab-VariableFont_wght.ttf);
}
@font-face {
  font-family: maybe2;
  src: url(CourierPrime-Regular.ttf);
}
body {
  background-color: #3f517f;
}
.title {
  text-align: center;
  font-size: 4em;

  color: azure;
  margin-top: 0.25em;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-decoration-color: azure;
}
#nav {
  width: auto;
  margin: auto;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  display: table;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc;
}
#nav li a:hover {
  text-decoration: underline;
  background-color: #fff;
}
#nav li:last-child a {
  border: none;
}
.box-title {
  text-align: center;
  font-family: maybe;
  margin-top: 1em;
  margin-bottom: 1em;
  color: azure;
}
.main-box {
  width: 50vw;
  min-width: 30em;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid azure;
  background-color: azure;
  text-align: justify;
  text-justify: inter-word;
}
.post-title {
  color: #069;

  margin-top: 0.2em;
  margin-left: 0.25em;
}
.time {
  margin-left: 0.25em;

  font-size: 0.9em;
  font-weight: 600;
  color: rgb(26, 112, 156);
}
.post {
  font-size: 0.9em;
  font-family: maybe2;
  margin-left: 0.25em;
  margin-top: 0.8em;
  margin-right: 0.25em;
}
.main-box .first {
  width: 75%;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

如果代码太长，我很抱歉，但我真的不知道如何解决这个问题。预先感谢！

Answer 1

将这些行添加到

nav

元素：

#nav {
  width: auto;
  margin: auto;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  display: table;

 @media (max-width: 480px) {
  display: flex;
  flex-direction: column;
 }
}

如何使用媒体查询为响应式网页设计制作垂直导航栏（菜单）？

问题描述投票：0回答：1

1个回答

最新问题

如何使用媒体查询为响应式网页设计制作垂直导航栏（菜单）？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1