1

メイン ナビゲーションが 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 タグごとに個別のクラスを作成する必要がありますか?

誰かが助けてくれることを願っています。

よろしく、

ローランド

4

1 に答える 1

0

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/

于 2013-02-03T19:50:30.347 に答える