水平选项卡到垂直选项卡

有没有办法让这个脚本上的选项卡垂直而不是水平？（堆叠在一起）

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

我很喜欢其他方面，但我想在我的主页上做一个菜单；我的主菜单是水平的。

垂直

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

use
//vertical  
li
    {
    display:inline;
    }
//horizontal
li
    {
    display:block;
    }

相关内容

最新更新

热门标签：