9

私はそれを説明する方法と、それを示すことができる方法をまったく知らないのではないかと心配しています. だから私はこのフィドルをセットアップしました。

ご覧のとおり、ナビゲーション メニューはあるべき場所にありません。head 要素の下端と左端に正確に設定する必要があります。すなわちbottom: 0とleft: 0。しかし、私は -90degs の回転を設定してnavいます。回転が存在しないかのように、要素の絶対配置が回転の前に、または元の要素で行われていることは明らかです。

疑似要素を使用し:beforeて、その方法で解決できるかどうかを試してみました。:afterしかし、これらの疑似要素を完全に把握することはできません。どちらの場合も、ローテーションはバイパスされました。(回転がなければ、nav要素は明らかに本来あるべき場所に配置されます。)

これは基本的にコードです：

<div id="head">
    <div id="title">My Web</div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Something Else</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

派手なものはありません。

これが CSS (この問題に関係する部分) です。

#head {
    position: relative;
}
nav {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}
nav a {
    display: inline-block;
    padding: 0 9px;
}

仕組み:これは Fiddle プロジェクトで確認できます。

誰かが私に手を貸してくれることを願っています。

PS。また、タグ内のテキストのサイズによっては、<a>タグ内の垂直要素間の距離が0.5 ピクセルのようnavにわずかに大きくなり、境界線がぼやけてしまうことがあります。これは、要素の 1 つに 4 文字とスペースが追加されたこの別のバージョンで確認できます。<a>なぜこれが違いを生むのか理解できません。ただし、メニューの見栄えが悪くなります。

4

2 に答える 2

2

あなたのナビのulのパディングのようです。微調整してみる

nav ul {パディング-左: 0; }

(Chrome の dev-tools は、欠落している最後の 1 または 2 ピクセルを見つけるのに役立つ可能性があり、ul パディングを見つけるのに役立ちました。)

于 2013-06-15T07:31:42.610 に答える