jquery - 動的に追加された jQuery 要素のスタイリング

Question

デモは次のとおりです。

静的に配信されるかロード時に配信されるかによって、同じマークアップが異なるように見える理由について、私は混乱しています。DOM がどのように解析され、スタイルが親要素から適切に継承されていないかに関連していると思いますか?

コンテキストは、ロジックが複雑すぎて要素を非表示/表示できないインタラクティブなフォームを設計しているということです。したがって、新しい要素をオンザフライで作成/破棄したいと思います（ただし、適切な CSS を使用）。

ご協力いただきありがとうございます！

score 2 · Accepted Answer

これは、静的 htmlで 2 行に並んselectでいるため、inputそれらの間にスペースがあることを意味します。これを動的に取得したい場合は、そこにもスペースを追加する必要があります。

ここに実用的なフィドルがあります。

ただし、この種の配置は避け、とには厳密な CSS スタイルを使用することを強くお勧めしmarginますpadding。これは、CSS を使用して修正されたフィドルです。

score 0 · Accepted Answer

これは、HTMLがコードに追加される方法です。実際に入力する方法とは異なります。おかしなことに、これはあなたのために働くでしょう。

dynamicControls.append(dynamicSelect);
dynamicControls.append('\r\n');
dynamicControls.append(dynamicInput);

score 0 · Accepted Answer

それは通常の問題です：空白。静的フォームにはとの間に改行が</select>あり<input>、フォームでは空白になります。しかし、要素を動的に追加する場合、それらの間に何もありません。

次のように変更します。

dynamicControls.append(dynamicSelect, ' ', dynamicInput);

どちらも同じように見えます。

または、動的要素の外観を好む場合は、静的バージョンの空白を削除します。

score 0 · Accepted Answer

および要素はとしてスタイル設定されているためselect、マークアップにスペースが存在する場合、それらの間にスペースがあるインライン要素として扱われます。inputinline-block

動的要素を追加する前にスペースまたは改行を挿入するか、静的要素の改行を削除してください。

4 に答える 4