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

Question

我的问题是我的 html 中有 br，以便使 480 像素视口(viewport)的导航垂直，但我需要导航水平并以 1024 和 1280 像素视口(viewport)居中。这是我的 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>

这是 CSS:

@media screen and (min-width: 1024px) {
  #wrapper {
    width: 900px;
  }
  header {}
  article.left {
    float: left;
    clear: left;
  }
  aside.complementary {
    float: right;
    clear: right;
  }
  nav {
    display: inline-block;
  }

Answer 1

请检查以下是否适合您；

 @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;}