Jquery表示ブロックで不要な行シフトが発生する

Question

私のウェブサイトの1つの部分に、テキストラベル、テキスト入力ボックス、ボックスの背後にあるラベル（ラベルはユニットを指定しています）があります。ラジオボタンがチェックされているかどうかによって、これらを可視/不可視にします。次のように

HTML部分は現在、次のとおりです。

<span id="txtLabelInFronOfBox">Some text</span> 
<input id="textBoxInput" size="3" class="numeric" pattern="[0-9]+" type="text"> 
<span id="txtUnit">A</span> 

私はここではなくspanタグを使用していた理由は、単純にテキストを入力し、私は、テキストのためのいくつかのIDを持っている必要があるということです、 Jqueryパートからアクセスします。ここではjQueryの一部だ：

$('#rbtMyRadioButton').change(function() { 
    if ($('#rbtMyRadioButton').is(':checked')){ 
    $('#txtLabelInFronOfBox, #textBoxInput, #txtUnit').css('display', 'block'); 
    } 
}); 

私は「ディスプレイ」を使用していないよ理由「目に見える」/「目に見えないが」私はこれらのコントロールは、彼らが表示されていない時に消えて占有スペースが欲しいということです。これはうまくいきますが、何らかの理由でこれが各コントロールの後にラインシフトを作成することを除いて、ラジオボタンをチェックするとこれらのコントロールが現れますが、txtLabelInFronOfBoxの後に行シフトがあります。

私はこれらのラインシフトを取得しないために何ができるのですか？

最初に、これらのコントロールの周りに段落を作成し、その段落にIDを与え、JqueryからIDにアクセスしました。 HTMLバリデーターで自分のページのコードをチェックしたところ、これはHTML5標準に従っていないと言われました。それは残念ですが、それは私の望みどおりに機能していたからです。

Answer 1

"行シフト"とは、各要素が改行して始まることを意味します。これは、display: blockを設定しており、デフォルトではブロック要素が新しい行で開始するために起こります。

代わりに言うことができる：

$('#txtLabelInFronOfBox, #textBoxInput, #txtUnit').css('display', 'inline'); 
// OR 
$('#txtLabelInFronOfBox, #textBoxInput, #txtUnit').css('display', ''); 

"インライン" スパンと入力のデフォルトです。 displayを空の文字列に設定すると、スタイルシートで指定されているデフォルト値に戻ります（指定されていない場合）。要素タイプのデフォルト値（この場合は "inline"）に戻ります。

段落内の要素を折り返し、有効なhtml5でない要素については、代わりにdiv要素を使用してみてください。

むしろ直接自分でdisplayを設定するよりも、jQueryの.show()と.hide()方法を試してみてください。

$('#txtLabelInFronOfBox, #textBoxInput, #txtUnit').show(); 

デモ：http://jsfiddle.net/nnnnnn/Hmrnq/1/（アマールへの感謝を開始フィドルを作成するための）