1

できるだけ明確かつ簡潔に。私は、他のいくつかの部門を含むために使用する1200pxの固定幅の部門「ボックス」を持っています。この区分の1つは、幅100％、高さ25pxのリンクバー「ピンクバー」です。この「ピンクバー」部門内に、インラインで表示され、右にフロートされた順序付けられていないリストを追加しようとしています。リストは右に浮かんで表示されますが、部門内ではなく部門の下の行に表示されます。部門には十分な余地があり、新しいラインが必要になる理由はまったくありません。たとえば、「ピンクバー」の幅を1200pxに設定して、さまざまなパラメータをいじってみましたが、何も機能しません。これらのリスト要素が、それらが呼び出される部門の外に存在できる理由を誰かが説明できますか？ 

#thebox{
   padding-top: 0px; 
   margin-top: 0px; 
   margin-left: auto; 
   margin-right: auto; 
   width: 1200px; 
   height: 250px;
}

#pinkbar{
   background-image: url(../visual/pinkMenuBar.jpg); 
   background-repeat: no-repeat; 
   padding-top: 3px; 
   padding-left: 30px;
   padding-right: 10px; 
   margin-top: 0px; 
   margin-left: 0px; 
   margin-right: 0px; 
   width: 100%; 
   height: 25px; 
}

ul.nav{ 
    list-style-type: none; 
}

ul.nav li{
   border-left-width: 2px;
   border-left-style: groove;
   border-left-color: grey;
   display: inline;
   float: right; 
}

<div id="pinkbar" class="cambria3black">Tel: 111 111 1111
   <ul class="nav">
        <li>Testimonials</li>
        <li>About</li>
        <li>Fees</li>
    </ul>
</div>

この場合も、リスト要素はインラインで表示され、右にフロートされ、境界線があります。彼らは単に部門の範囲内ではありません。

4

1 に答える 1

1

コンテナ（）もブロック要素であるため、フロートする必要があります。これにより、コンテナulは可能な限り最大のスペースを埋めようとします。つまり、次の行に分類されます。

ul.nav { 
    list-style-type: none; 
    float: right; /* floats to the right, so will fit on the same line */
    margin: 0; /* gets rid of the default list margins */
}

コードを絞り込んだ（そして機能している）バージョンを使用して、小さなjsFiddleを作成しました。

于 2013-03-03T23:00:22.440 に答える