Html 如何将导航从垂直更改为水平？

我的问题是，为了使480px视口的导航垂直，我的html中有br，但对于1024和1280px视口，我需要导航水平并居中。这是我的html：

<nav role="navigation">
<h3>Links</h3>
<a href="index.html">Home</a><br>
<a href="mission.html">Mission</a><br>
<a href="about.html">About Us</a><br>
<a href="products.html">Products</a><br>
<a href="http://www.somewebsiteidkyet.net">Somewebsitehere.net</a>

---

请检查以下是否适用于您

 @media screen and (max-width: 1023px)
 {
  nav h3,  nav a {display:block;}
 } 

 @media screen and (min-width: 1024px)
 {
  nav h3 {display:block;} nav a {display:inline-block;}
 }

 nav {display:block;}

无需为导航标签指定角色=导航

试试这个。这会奏效的。这是编写菜单栏的正确方法

您需要使用display:inline grid而不是使用。看看是否有帮助

@媒体屏幕和最大宽度：480px {nav{显示：内联网格！重要；} 导航{显示：块；} @媒体屏幕和最小宽度：1024px，最大宽度：1280px {nav{显示：内联块；} 链接

 @media screen and (max-width: 1023px)
 {
  nav h3,  nav a {display:block;}
 } 

 @media screen and (min-width: 1024px)
 {
  nav h3 {display:block;} nav a {display:inline-block;}
 }

 nav {display:block;}

 <style>
 nav  ul li {display: inline-block;
    }

</style>

<h3>Links</h3>
 <nav>
    <ul>
 <li>
        <a href="index.html">

            Home
        </a>
    </li> 
     <li>
        <a href="mission.html">

            Mission
        </a>
    </li>  
     <li>
        <a href="about.html">

            About Us
        </a>
    </li>  
     <li>
        <a href="products.html">

            Products
        </a>
    </li>   
       <li>
        <a href="http://www.somewebsiteidkyet.net">

          Somewebsitehere.net
        </a>
    </li>   
</ul>
</nav>