使用Media Query时display:block不生效，导航栏无法垂直排列

完成使用Media Query的作业时，尝试在小屏幕上将网站导航栏改为垂直排列，但导航链接仍保持在同一行，无法实现每个链接单独占一行的效果。

代码如下：

nav {
  position: fixed;
  z-index: 1000;
  top: 0px;
  text-align: center;
  background-color: #eedfd4;
  margin: auto;
  width: 99%;
  padding: 5px;
  border-radius: 7px;
}

nav li {
  list-style-type: none;
  width: 10%;
  text-align: center;
  border-radius: 5px;
  margin: 8px;
  padding: 6px;
  background-color: #D5BDAF;
  transition: background-color 1s;
}

nav li:hover {
  background-color: #d6b19b;
}

nav a {
  text-decoration: none;
  color: #876244;
}

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  nav li {
    display: block;
  }
  .himg {
    display: none;
  }
}

@media screen and (min-width:760px) {
  body {
    background-color: #cab9afc1;
  }
}

<nav>
  <ul>
    <li><a href=../index/index.html>Homepage</a></li>
    <li><a href=../about/about.html>About Us</a></li>
    <li><a href=../locations/locations.html>Locations</a></li>
    <li><a href=../recommended/recommended.html>Reccomended</a></li>
    <li><a href=../apply/apply.html>Apply</a></li>
    <li><a href=../contact/contact.html>Contact Us</a></li>
  </ul>
</nav>

问题核心是仅给<li>设置display:block不足以实现垂直排列，还需调整父元素<ul>的布局逻辑，以下是两种修复方式：

方式一：Flex布局调整（推荐） #

若大屏下通过Flex实现横向导航，在小屏幕媒体查询中修改<ul>的Flex方向为垂直：

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  /* 调整ul为垂直Flex布局 */
  nav ul {
    display: flex;
    flex-direction: column;
    padding-left: 0; /* 清除ul默认左侧内边距 */
    margin: 0 auto;
  }
  nav li {
    width: auto; /* 适配内容宽度，或设为100%占满整行 */
    margin: 8px auto; /* 水平居中，保留上下间距 */
  }
  .himg {
    display: none;
  }
}

方式二：块级元素样式优化 #

若大屏下通过inline-block或float实现横向导航，小屏幕时确保<li>作为块级元素独占一行：

@media screen and (max-width:759px) {
  fig {
    width: 100%;
  }
  footer {
    width: 100%;
  }
  nav ul {
    padding-left: 0; /* 清除ul默认左侧内边距 */
  }
  nav li {
    display: block;
    width: 100%; /* 占满父容器宽度 */
    margin: 8px 0; /* 保留上下间距 */
  }
  .himg {
    display: none;
  }
}

补充大屏横向导航样式 #

你当前代码缺少大屏横向导航的实现逻辑，需在大屏媒体查询中补充：

@media screen and (min-width:760px) {
  body {
    background-color: #cab9afc1;
  }
  /* 大屏横向导航布局 */
  nav ul {
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin: 0;
  }
}

内容的提问来源于stack exchange，提问作者vin