0

JsFiddleの例を設定しました

<div id="fsUploadProgress">
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144111111111111111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo01441111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144111111.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_2" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0144.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_2_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
   <div class="progressWrapper" id="SWFUpload_0_3" style="opacity: 1; ">
      <div class="progressContainer blue">
         <a class="progressCancel" href="#" style="visibility: hidden; "> </a>
         <div class="progressName">Photo0145.jpg</div>
         <div class="progressBarStatus">Complete.</div>
         <div class="progressBarComplete" style=""></div>
         <div id="SWFUpload_0_3_deleteDiv" class="remove" style="text-align: right; ">
            <a href="javascript:void(0);">x</a>
         </div>
      </div>
   </div>
</div>

クラス「progressContainer」のすべてのDivが完全に一行で表示されるようにしたいのは、例として、その一部が1行で表示され、残りが次の行で表示されている場合です。

申し訳ありませんが、私はcssで非常に新しいです私を助けてください

4

2 に答える 2

2

追加.progressWrapper

margin-right:auto;
float:left;
于 2012-11-02T20:38:19.467 に答える
0

divをに設定する代わりに、に設定display:inline;するdisplay: inline-block;と、動作を開始します。好みに合わせて幅などを調整する必要があります。楽しみ。

古いバージョンのIEをサポートする必要がない限り、floatよりも優れています。

于 2012-11-02T20:39:09.787 に答える