水平标签到垂直

时间:2012-07-23 05:58:22

标签: javascript tabs navigation

有没有办法让这个脚本上的标签垂直而不是水平? (堆叠在彼此之上)

http://www.javascriptsource.com/navigation/giltab.html

非常喜欢它,但我想在我的主页内做一个菜单。我的主菜单是水平的。

2 个答案:

答案 0 :(得分:1)

<强>垂直

     <!DOCTYPE html>
     <html>
     <head>
     <style type="text/css">
     ul
     {
     list-style-type:none;
     margin:0;
     padding:0;
     }
     a
     {
     display:block;
     width:60px;
     background-color:#dddddd;
     }
     </style>
     </head>

     <body>
     <ul>
     <li><a href="#home">Home</a></li>
     <li><a href="#news">News</a></li>
     <li><a href="#contact">Contact</a></li>
     <li><a href="#about">About</a></li>
     </ul>

     </body>
     </html>

<强>水平

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    li
    {
    display:inline;
    }
    </style>
    </head>

    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>

答案 1 :(得分:0)

use
//vertical  
li
    {
    display:inline;
    }

//horizontal

li
    {
    display:block;
    }