Question

问题如下，在css行分隔符之间有一些输入，它们都是垂直的，并且在输入下面有标签。

问题是当出现验证错误时，有些文本放在这个标签内，使它们可见，这会使div更大并导致容器div具有更大的高度，因此输入不再垂直对齐。

是否有一种方法可以使标签在没有文字的情况下已经具有与零不同的高度？

Answer 1

这有帮助吗？ jsfiddle：http://jsfiddle.net/thecbuilder/BKrHq/

方法1 在此解决方案中，div包含标签根据字体大小给出固定高度。

<强> HTML

<div>
    <input type="text" id="txt" value="label content"/>
</div>
<div id="labDiv">
    <label id="lab"></label>
</div>
<div>
    <input type="button" value="Show Content in label" id="showLab" />
</div>

<强> CSS

#labDiv{
    height:18px;  
}

方法2 在这种方法中，标签被赋予文本：空格字符 -  以使其达到实际高度，与包含文本时相同。

小提琴： http://jsfiddle.net/thecbuilder/4Bazb/

<强> HTML

<div>
    <input type="text" id="txt" value="label content" />
</div>
<div>
    <label id="lab">&nbsp;</label>
</div>
<div>
    <input type="button" value="Show Content in label" id="showLab" />
</div>

快速实施方法2 ：

如果您有所有此类标签的公共类，那么您可以在css中使用:before来快速添加空格。

如果类是：errorLabels

.errorLabels::before
{
content:"\00a0";
}

Answer 2

在css中设置标签div的最小高度。这意味着即使没有标签，标签也会有一些高度，但如果文字增加，那么标签将适应其内部文字的高度。

#labelDiv{
min-height:14px;  
}

在div中为空标签添加文本而不向div添加高度

2 个答案: