jquery顯示塊創建不需要的行轉移

在我的網站的一部分，我有一個文本標籤，一個文本輸入框和一個標籤背後的標籤（標籤指定單位）。我希望這些可見/不可見取決於是否檢查了單選按鈕。jquery顯示塊創建不需要的行轉移

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後面有一個換行符，一個位於textBoxInput之後，另一個位於txtUnit之後。

任何建議，我可以做些什麼不能得到這些線路轉移？

最初，我剛剛創建了一個圍繞所有這些控件的段落，給段落一個ID並從Jquery中訪問了ID。然後我在HTML驗證器上檢查了我的頁面的代碼，它說這不符合HTML5標準。這太遺憾了，因爲這完全像我想要的那樣。

來源

2012-02-22 Sorin

是否'直列block'幫助，而不是隻是'塊'？ – Niklas 2012-02-22 09:40:14

我編輯了你的問題，正確顯示了html標記。如果你想在你的問題中包含代碼（包括html標記），只需將它縮進四個空格。或者在沒有縮進的情況下正常輸入，然後選擇它並點擊'{}'按鈕。對於普通句子中的小代碼片段，例如說'display：block'只需引用每個代碼片段與''字符。 – nnnnnn 2012-02-22 10:22:27

如果可能的話創建一個jsFiddle。使用[this]（http://jsfiddle.net/Hmrnq/）作爲起點。 – 2012-02-22 10:28:00

通過「換行」我假設你的意思是每個元素都從一個新行開始。發生這種情況是因爲您正在設置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/（感謝阿馬爾創建的出發小提琴）

來源

2012-02-22 10:28:17 nnnnnn

這解決了我的問題。謝謝！ – Sorin 2012-02-22 11:40:06

jquery顯示塊創建不需要的行轉移

回答

相關問題