0

ここで小さなナビゲーションを作成しようとしています。以下のjsfiddle。

http://jsfiddle.net/s3king93/yjKdR/

テキストを大きくしたり動かしたりせずに、リンク項目にパディングを追加する方法はありますか?

http://i.imgur.com/0zDt0vR.pngのような理想的な外観にしたいと思います

何か案は？

HTML

<div class="list-1">
    <ul class="list-style-1">
        <li><a href="">HOME</a></li>
        <li><a href="">INFLUENCES</a></li>
        <li><a href="">ABOUT ME</a></li>
        <li><a href="">CLASSES</a></li>
        <li><a href="">ANDREWS VIDEO BLOG</a></li>
        <li><a href="">PHOTOGRAPHY</a></li>
    </ul>
</div>

CSS

.list-1 {
    padding:none;
    float: right;
    clear:right;
    padding-right: 27px;
}

.list-style-1 {
    padding-top: 26px;
    list-style-type: none;
    font-family: "Bell Gothic Std Light";
    font-size: 20px;
}

a:link {
    text-decoration:none;
    color: #2A2A2A;
}

a:visited {
    text-decoration:none;
    color: #2A2A2A;
}

a:hover {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A;
    padding-left: 5px;
    padding-right: 70px;
}

a:active {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A
}
4

4 に答える 4

3

<ul>デフォルトですでにブロック要素であるため、その周りに div は必要ありません。

さらに、にa:hover設定padding-rightしました70px。そのため、ホバリングするとリストが移動します。ホバー時にパディングが表示される理由がわかりません。ホバー時にパディングを削除すると、リストはそのまま残ります。

これは、あなたの望むことですか？

于 2013-05-10T15:14:56.950 に答える
0

ホバーしたときにパディングを一定に保つ必要があります。

パディングを からa:hoverに移動しますa:link。ページ上のすべてのリンクに適用されないように、これらのスタイルを修飾することもお勧めします。

.list-style-1 a:link {
  text-decoration:none;
  color: #2A2A2A;
  padding-left: 5px;
  padding-right: 70px;
}

.list-style-1 a:visited {
  text-decoration:none;
  color: #2A2A2A;
}

.list-style-1 a:hover {
  text-decoration:none;
  color: #69E0F6;
  background-color: #2A2A2A;
}
于 2013-05-10T15:14:52.843 に答える