0

水平ナビゲーションメニューを作成しようとしています。メニュー項目（li）の要素は円の形をしています。これはデモです。質問は、リンクのテキストが上に表示されていることです。中央に表示するにはどうすればよいですか。それは可能でしょうか、私に知らせてください、どんな提案も歓迎します。ありがとう

4

5 に答える 5

1

また、テキストが2行を超える場合は、これを使用してテキストを中央に保つことができます。

#menu ul li a
{
    display:table-cell;
    vertical-align:middle;
    height:85px;
    width:35px;
}

そしてあなたの2番目の質問への答え：

#menu ul li:hover
{
    background:red;
}
于 2012-06-01T15:58:12.580 に答える
1

私はあなたのフィドルで遊んだ。私がしたことは、「li」display：inline-blockを作成し、li：hoverを#menu li：hoverに変更したことです。

#menu ul li
{
    float:left;
    display:inline-block;
    padding:40px 30px;
    background-color:slategray;
    margin:0 20px 0 0;
    height:17px;
   -webkit-border-radius:50px;
}
#menu li:hover
{
   -webkit-box-shadow:0 0 50px 12px #69CDF5;
  background:#cb2326;  
}

ここでフィドルを確認してください：http：//jsfiddle.net/Az8cG/15/

于 2012-06-01T17:03:58.693 に答える
1

マージンとパディングを使用できるのはブロックアイテムのみです。アンカータグはインライン要素です。それらをCSSのブロック要素にする必要があります。

#menu ul li a
{
    text-decoration:none;
    display:block;
    padding:30px 0 0 0;
}
于 2012-06-01T15:51:31.507 に答える
1

diodeusへの回答として投稿された2番目の質問に答えるには：

純粋なcss3ホバー効果を使用したい場合は、：hoverセレクターを使用してこれと同様のことを行う必要があります。

#menu ul li a:hover {
   background-color: #000000;
   }

素晴らしい効果を得るには、ここに表示されているCSS3遷移プロパティを使用します。

http://www.w3schools.com/css3/css3_transitions.asp

于 2012-06-01T16:06:16.443 に答える
1

垂直方向の整列をいじるのではなく、線の高さを円の高さ/幅に等しく設定します。

背景が赤で表示されないという問題は、で宣言されたセレクターの特異性が、li:hoverの元のbgカラー宣言を克服するのに十分な高さではなかったこと#menu ul liです。

両方の修正については、 http： //jsfiddle.net/Az8cG/11/を参照してください。

于 2012-06-01T16:09:38.113 に答える