0

When I have a navigationbar for example:

<div class ="navBar"> 
  <ul>​
      <li> ​        <a id=​"nav-questions" href=​"/​questions">​Questions​&lt;/a>​
      </li>​
      <li> ​        <a id=​"nav-questions" href=​"/​questions">​Answers​&lt;/a>​
      </li>​ 
  </ul> 
</div>

which will show on maximum screen-size something like this:

    ​ ​ ​Questions​​ ​ ​ ​Answers​​ ​

But when the screen-size is minimized to a size smaller than the navigation bar, it should stack vertical, like this:

  • Questions
  • Answers

I've read something about clearfix, but I'm not sure about it

4

2 回答 2

2

You would need to use media queries and the css would look something like this:

@media screen and (max-width:*insert nav width in pixels here*) {
    .navBar ul li {
        float: none;
        list-style-type: disc;
     }
}
 @media screen and (min-width:*insert nav width +1 in pixels here*) {
    .navBar ul li {
       float: left;
       list-style-type: none;
    }
}
于 2013-05-27T23:59:53.137 回答
-1

You can use css media queries to do it.

于 2013-05-27T23:56:36.650 回答