0

同じ行にそれぞれ左右に配置する必要があるタイトルとナビゲーション メニューがあります。

私の調査によると、これは と を使用して実行できfloat: leftます。これは、テキストが同じサイズの場合は機能しますが、タイトルがナビゲーション メニューよりも大きいフォント サイズの場合、ナビゲーション メニューは行の下部に揃えられず、次のように上部に揃えられます。float: rightclear: both

_____     _____         ___ 
  |    |    |    |     |                                    Link 1    Link 2    Link 3
  |    |    |    |     |___
  |    |    |    |___  |___

私が達成しようとしているのはこれです：

_____     _____         ___ 
  |    |    |    |     |    
  |    |    |    |     |___
  |    |    |    |___  |___                                 Link 1    Link 2    Link 3

ここでフィドルを作りました

ナビゲーション メニューを行の一番下に配置するにはどうすればよいですか?

4

2 に答える 2

1

私はあなたのjsFiddleを変更し、正しくしました：http: //jsfiddle.net/Z3a6Z/8/

CSSで行った主な変更は次のとおりです。

#menu
{
    position: relative;
    float: right;
    height : 100px;    
    width: 160px;
}

#menu ul {
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
}
于 2012-12-05T15:05:08.213 に答える
0

それらに等しいheights を与えてから、リンクpadding-topで onを使用できdivます-

同じ実際の高さを維持するために、padding-topからの量を差し引くことを忘れないでください。height

http://jsfiddle.net/gUFy8/1/ JSFiddleの例を次に示します。

ここにフィドルの更新があります。タイトル div に高さを追加し、メニュー div に高さとパディングを追加しました http://jsfiddle.net/Z3a6Z/3/

完璧なラインナップを得るには、高さとパディングの量をいじる必要があります。

于 2012-12-05T14:54:10.707 に答える