1

私のラッパーdivcss;

.post-wrapper{
  width:200px;
   min-height:50px;
  }

ul list css for .post-wrapper;

.post-wrapper ul{
   margin:0;
   padding:0;
   width:200px;
 }

.post-wrapper ul li{
   margin-bottom:2px;
   padding:0;
   list-style:none;
   text-align:center;
   width:200px; 
   float:left;   
 }

HTML

<div class="post-wrapper">
 <ul>
   <li>Item-1</li>
   <li>Item-2</li>
   <li>Item-3</li>
   <li>Item-4</li>
   <li>Item-5</li>
   <li>Item-6</li>
   <li>Item-7</li>
 </ul>
</div>

5つのリストアイテム（li）には問題はありませんが、5つのポストラッパーの後は伸びません。この問題をどのように解決できますか？

4

4 に答える 4

0

順序付けされていないリスト要素でclearfix手法を使用できます。:beforeこの手法はCSSで生成されたコンテンツ（ 、 ）に依存している:afterため、IE8+でのみ機能することに注意してください。他の最新のブラウザでも問題ありません。

ラッパーのコンテキストに応じて、ラッパーをフローティングすると、デザインが破損する場合と破損しない場合があります。divこのテクニックを使用すると、ラッパーを浮かせずに伸ばすことができます。

.post-wrapper ul {
     margin:   0;
     padding:  0;
     width:    200px;
 }

 .post-wrapper ul:after {
    content:      ".";
    overflow:     hidden;
    display:      block;
    text-indent:  -9999px;
    height:       0;
    clear:        both;
    visibility:   hidden;
 }

これが実際の例のjsfiddleです。赤い背景はわざと追加されています。

于 2012-11-26T15:12:47.250 に答える
0

内部要素で使用する場合float: leftは、OUTER要素がフロート要素をクリアするようにする何かを行う必要があります。

これを実現する方法はいくつかありますが、この場合の最も簡単な方法はoverflow: hidden、.post-wrapper ul要素で使用することです。

.post-wrapper ul{
   margin:0;
   padding:0;
   width:200px;
   overflow: hidden;
 }
于 2012-11-26T15:13:04.763 に答える
0

ulあなたとあなたのdiv左の両方を浮かせてください、それは問題を解決するはずです。

これがデモンストレーションです：http：//jsfiddle.net/sCAdj/

もう1つの方法は、フロートをクリアするダミーリストアイテムを追加することです。

<li style="float:none;clear:left"></li>

デモンストレーション： http： //jsfiddle.net/sCAdj/1/

于 2012-11-26T15:14:16.070 に答える
-1

問題はfloat:leftli要素にある可能性があります。1。position:relativeラッパーコンテナに追加します。2。ラッパーの下部にクリアリングdivを追加します。

<div class="post-wrapper">
 <ul>
   <li>Item-1</li>
   <li>Item-2</li>
   <li>Item-3</li>
   <li>Item-4</li>
   <li>Item-5</li>
   <li>Item-6</li>
   <li>Item-7</li>
 <div style="clear:both; width:100%"></div>
 </ul>
</div>
  1. liからフロートを削除します
于 2012-11-26T15:14:09.083 に答える