0

以下のHTMLは、私が取り組んでいるものです。リスト形式ではなく、一行にまとめたい。

  1. float:left を使用する場合、「ライン ラップ」時に div を (垂直方向に) 大きくするにはどうすればよいですか?
  2. display:inline を設定した場合、存在しない可能性のあるスペースではなく、リスト項目間で実際に行を折り返すにはどうすればよいですか (以下を参照)。

 <div class="singleTiddlerList">
    	<li><a href="javascript:;" class="button center">Hide All</a></li>
    	<li><a href="javascript:;" class="button center">Show All</a></li>
    	<li><a href="javascript:;" class="button center">Refresh</a></li>
    	<li><a href="javascript:;" class="button">ResizerMacroPlugin</a></li>
    	<li><a href="javascript:;" class="button">ResourceMacro</a></li>
    	<li><a href="javascript:;" class="button">saveBackupPlugin</a></li>
    	<li><a href="javascript:;" class="button">singleTiddler</a></li>
    	<li><a href="javascript:;" class="button">sliderMacro</a></li>
    	<li><a href="javascript:;" class="button">toggleBackstageEdit</a></li>
    	<li><a href="javascript:;" class="button">TopbarPlugin</a></li>
 </div>

編集:参考までに、Chrome と Firefox でのみ動作する必要があります。これは顧客の Web サイトなどではなく、単なる個人ファイル (実際にはTiddlyWiki ) です。

4

3 に答える 3

3

私はあなたがとを使うべきだとdisplay: inline-block思いwhite-space: nowrapます<li>。

バージョン9未満のIEのサポートが必要な場合は、次のハックも使用してください。

display: inline-block;
*zoom: 1;
*display: inline;
于 2012-09-22T20:04:27.293 に答える
1

'display：inline;'を使用して発生する可能性のあるクロスブラウザーの問題を考えると、'float：left;'を使用することをお勧めします。代わりは。

これが作業の一部です：http：//jsfiddle.net/tHjap/4/

'div'（この場合は'ul'）が大きくなることについて提起したポイントに対処するには、幅を'auto'に設定するだけです。

于 2012-09-22T18:56:54.563 に答える
0
  1. overflow: hidden;コンテナに使用します。これは、仕様のいくつかの奇妙なために機能します。詳細については、 http : //www.quirksmode.org/css/clearing.htmlまたはhttp://colinaarts.com/articles/the-magic-of-overflow-hidden/を参照してください。
  2. 質問を正しく理解しているかどうかはわかりませんがwhite-space: pre;、as が必要な場合があります。これにより、それらの内部での改行が防止されます。
于 2012-09-22T19:07:25.793 に答える