Блок отображения Jquery создает нежелательные сдвиги строк.

Question

На одной части моего веб-сайта у меня есть текстовая метка, текстовое поле ввода и ярлык за рамкой (метка указывает блок). Я хочу, чтобы они были видимыми/невидимыми в зависимости от того, проверена ли радиобарабана.

HTML, часть в настоящее время выглядит следующим образом:

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

Причина, почему я использую калибровочный тег здесь, а не просто просто ввести текст, то, что мне нужно иметь некоторый идентификатор для текста, для доступа к нему из части JQuery. Вот Jquery часть:

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

Причина, почему я использую «дисплей», а не «видны»/«невидимым», что я хочу пространство эти элементы управления оккупировать исчезают, когда они не видны. Это отлично работает, за исключением того, что по какой-то причине это создает сдвиг по строкам после каждого элемента управления, т. Е. Когда я проверяю переключатель, эти элементы управления отображаются, но после txtLabelInFronOfBox происходит сдвиг линии, один после textBoxInput и один после txtUnit.

Любые предложения в отношении того, что я могу сделать, чтобы не получить эти линейные смены?

Первоначально я только что создал абзац вокруг всех этих элементов управления, дал абзацу идентификатор и получил доступ к ID из JQuery. Затем я проверил код моей страницы на html validator и сказал, что это не соответствует стандарту 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(); 

Demo: http://jsfiddle.net/nnnnnn/Hmrnq/1/ (благодаря Амар для создания начальной скрипки)