1

再利用可能なコーディングを練習しているので、サムネイル スクローラーをゼロから作成することにしました。

ul を含む一連のリスト項目で display:inline-block を使用しています。私が使用しているulの幅を計算するには.outerWidth(); スペース表示のいくつかの修正に気付きました。要素間に inine-block を配置しますが、どれが最適な解決策かわかりません。

私が見つけた最初の修正は、親要素の幅を計算する前に、各要素の幅に 2px を追加することでした。私が見つけた 2 番目の修正は、word-spacing: -2px; を追加することでした。周囲の ul とは異なりますが、これは約 1px ずれていました。最終的な修正は最善の解決策であると思われ、これは font-size:0 を親に追加し、別の font-size をリスト項目に追加することでした。

私の好奇心は私を殺しています。これを修正する最善の方法と、フォントサイズが機能する理由を知る必要があります。

これは、私が取り組んでいるプロジェクトのjsfiddleですhttp://jsfiddle.net/Sus ​​annDelgado/wNvsx/

フィドルでは、以下の行でサイズを設定します

  var liw = parseInt($("#" + _globals.name + " > ul > li").outerWidth(true));
    _globals.innerwidth = ((liw) * _globals.count)
4

1 に答える 1

1

inline-boxes は単語と同じように動作し、間にスペースが表示されます。

font-size と使用されるフォントのスペース リレーのサイズ。サイズがゼロになると、スペース（および文字）が消えます:)。

HTMLコードのその他の解決策：互いに接触させる（スペースもインデントされたコードもありません） か、HTMLコメントを挿入してそのスペースを埋めます
<li>item</li><li>
next-item</li><li>
....</li>

<li>item</li><!--  
--><li>

. HTML を行に配置する前に縮小すると、スペースが解消されます

于 2013-06-23T22:44:01.027 に答える