6

要素にカーソルを合わせたときにフォントサイズを変更したかったのですが、私が遭遇した問題は、アイテムに移動すると、リストの他の div が下に移動することです。これは私のコードです:

CSS

a{
    /* position:absolute */
    font-size:16px;
}

a:hover {
    color:#0033CC;
    font-size:18px;
}

#menu_list{
    width:859px;
    cursor:pointer;
    }

#menu_list li{
    width:130px;
    height:21px;
    display:inline-block;
    margin: 0px 0px 0px 0px;
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; 
    text-align: center; 
    }

HTML

<ul id="menu_list">
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
</ul>

これはJSFiddleです。

ご覧のとおり、要素に position:absolute を書きました。これは機能します。つまり、div は静止したままですが、そうするとテキストを中央に配置する方法がわかりません。問題は、要素に上部マージンがないことだと推測したので、それも試しましたが、インライン要素の場合、マージンを設定することは不可能であるか、正しい方法ではない可能性があります。

4

4 に答える 4

6

line-height最も外側のインライン要素 (あなたの例では<li>) に、少なくとも内側の要素が (ホバー時に) なる最大サイズに等しいa を与える必要があります。

vertical-align: middleさらに、内側の要素 (アンカー) にも与える必要があります。それがないと、それらの下端が整列し、不快なビジュアルが生成されます.

の必要はありませんposition: absolute。

実際に見てください。

于 2013-01-11T11:28:38.060 に答える
0

に割り当てposition: relativeて、次のようliに変更することもできます。a

a {
    position:absolute;
    font-size:16px;
    display: block;
    width: 130px;
    left: 10px;
}

これは可能な限り最も洗練されたソリューションではありませんが（これが1つであるはずですline-height）、機能します。

于 2013-01-11T11:40:04.813 に答える
0

に追加float:leftするだけ<li>で、他の div の移動にまったく問題はありません。

#menu_list li{

    float:left

}
于 2013-01-11T11:30:36.433 に答える
0

に変更height:21pxし、オンline-heightを減らしますline-height by 1pxhover

a:hover {
    color:#0033CC;
    font-size:18px; line-height:20px;
    }
#menu_list li{
    width:130px;
    line-height:21px;
    display:inline-block;
    margin: 0px 0px 0px 0px;
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; 
    text-align: center; 
    }

デモ

于 2013-01-11T11:27:50.103 に答える