Question

在我的网站的一部分，我有一个文本标签，一个文本输入框和一个标签后面的标签（标签指定单位）。我希望这些是可见的/不可见的，这取决于是否检查了radiobutton。

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');
  }
});

我使用'display'而不是'visible'/'invisible'的原因是我希望这些控件占据的空间在不可见时消失。这样可以正常工作，除了由于某种原因这会在每个控件之后创建换行，即当我检查单选按钮时，会出现这些控件，但是在txtLabelInFronOfBox之后有一个换行符，一个在textBoxInput之后，一个在txtUnit之后。

有什么建议我可以做些什么来避免这些换班？

最初我只是围绕所有这些控件创建了一个段落，给段落一个ID并从Jquery访问了ID。然后我在一个html验证器上检查了我的页面代码，它说这不符合HTML5标准。这很可惜，因为它完全像我想要的那样。

Answer 1

通过“换班”我假设你的意思是每个元素都从一个新行开始。发生这种情况是因为您正在设置display: block，默认情况下，块元素从新行开始。

你可以说：

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

“inline”是跨度和输入的默认值。如果将display设置为空字符串，则它应该回退到样式表中指定的默认值，或者（如果未指定）元素类型的默认值（在这种情况下为“inline”）。

关于在段落中包装元素并且不是有效的html5，请尝试使用div元素。

不要直接自己设置display，而是尝试jQuery的.show()和.hide()方法：

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

演示：http://jsfiddle.net/nnnnnn/Hmrnq/1/（感谢Amar创造了起始小提琴）

Jquery显示块会产生不需要的换行

1 个答案: