Question

我的问题是我在我的html中为了使480px视口的导航垂直，但我需要导航水平并居中为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>

这是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

您需要使用display:inline-grid而不是<br>。看看它是否有帮助。

@media screen and (max-width: 480px)
 { nav {display: inline-grid !important;} }
nav {display: block;}
@media screen and (min-width:1024px and max-width: 1280px)
{ nav {display: inline-block;}  }

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

Answer 2

请检查以下内容是否适合您;

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

Answer 3

 <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>

无需为role="navigation"代码指定nav。

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

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

3 个答案: