html - 旋转导航网站

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/