旋转导航网站

Question

我有一个设计，其中主导航是旋转90度和子菜单的正常水平对齐。

 <div id="nav">
                    <ul>
                    <li><a href="#">Woonaccessoires</a></li>
                    <li><a href="#">Lampenkappen</a></li>   
                    <li><a href="#">Sieraden</a></li>
                    <li><a href="#">Geuren</a></li>
                    <li><a href="#">Tassen</a></li>
                    <li><a href="#">Aanbiedingen</a></li>
                    <li><a href="#">Bedrijven</a></li>
                    <li><a href="#">Contact</a></li>                
                </ul>
                </div>  

css部件是：

    #nav {
    width: 60%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
}
#nav li {
    float: left;
    list-style-type:none; 
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
 }
 #nav li a {
    display: block;
    padding: 8px 2px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
 }
 #nav li a:hover {
    color: #c00;
    background-color: #fff; }

您现在看到的是，并非li标记之间的所有空格都是相等的。如何解决这个问题？我试着使用页边距和填充。

我必须为每个li标签创建单独的类吗？

希望有人能帮上忙。

致以敬意，

罗兰

Answer 1

HTML (去掉了列表，因为它没有用)

<div id="nav">
<a href="#">Woonaccessoires</a>
<a href="#">Lampenkappen</a>
<a href="#">Sieraden</a>
<a href="#">Geuren</a>
<a href="#">Tassen</a>
<a href="#">Aanbiedingen</a>
<a href="#">Bedrijven</a>
<a href="#">Contact</a>
</div>

CSS：

#nav {
    float:left;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    line-height:0;
    width:100%;
}

#nav a {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    float: left;
    width:5px;
    margin-top:120px;
    padding: 10px 10px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
}

#nav a:hover {
    color: #c00;
    background-color: #fff;
}

如果你想改变它的外观，试着调整#nav a的宽度和边距

示例：http://jsfiddle.net/howderek/WD9PL/embedded/result/