2

今、ある問題に苦しんでいます。

非常に奇妙な動作をするリストがあり、firebugd を実行してファイル全体が 1 行に出力されるまで問題を見つけることができませんでした。

このようなもの。

<div class="clock-content-wrapper"><ul class="clock-digit-wrapper hour"><li class="clock-digit-one"></li><li class="clock-digit-three"></li></ul><ul class="clock-digit-wrapper minute"><li class="clock-digit-three"></li><li class="clock-digit-seven"></li></ul><ul class="clock-digit-wrapper second"><li class="clock-digit-zero"></li><li class="clock-digit-zero"></li></ul></div>

要素間にスペースはありません。

それが問題になる可能性があるとは知らなかったので、このようにfirebugの要素を修正し始めました。

<div class="clock-content-wrapper">
<ul class="clock-digit-wrapper hour">
<li class="clock-digit-one"></li>
<li class="clock-digit-three"></li>
</ul>
<ul class="clock-digit-wrapper minute">
<li class="clock-digit-three"></li>
<li class="clock-digit-seven"></li>
</ul>
<ul class="clock-digit-wrapper second">
<li class="clock-digit-zero"></li>
<li class="clock-digit-zero"></li>
</ul>
</div>

</ul>そして、スクリプトの下に要素がある場合</li>、スクリプトは実際に動作するはずであることに注意してください。

javascript でファイルを構造化する方法はありますか? HTML で作成されたツリーと JavaScript で作成されたツリーの違いを確認できる jsFiddle があります。 http://jsfiddle.net/Xk49c/

私は本当に css で何かを変更したくありません。html と js アプリケーションの両方が同じ css を使用しているためです。

4

2 に答える 2

4

あなたの<ul>要素はinline-blockフィドルのように表示されます。彼らはのこのあまり知られていない機能にinline-block苦しんでいると思います。

于 2013-02-07T18:46:58.430 に答える
1

問題は、HTML を使用して要素を作成する場合、要素を 1 つ以上のスペースまたは改行でインデントまたは分離することです。HTML はこれらのスペースを 1 つのスペースとしてレンダリングするため、これらの要素の間にスペースが表示されます。

minuteJavaScript によって作成された要素間にスペースを追加するには、クラスの左側にパディングを追加するか、各要素の間secondにテキスト ノードを挿入する必要があります。UL

hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
clock_toolbar_wrapper_close.appendChild(hours);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this


minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
clock_toolbar_wrapper_close.appendChild(minutes);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this
于 2013-02-07T18:53:47.310 に答える