html - 我想让一个 div(包含文本)与文本字段在同一行

Question

我有一个带有一些描述的 div，一个文本字段和另一个带有一些错误消息的 div，只有在输入不正确时才会出现。这一切都包裹在一个 p 标签中。我的问题是我希望错误消息出现在与文本字段和描述相同的行中，并且只有当文本太长时，才会出现太多的单词出现在下一行中。但是我不知道该怎么做，我尝试的每件事都会导致出现在下一行的整个错误消息。有人知道如何解决这个问题吗？

代码:HTML:

<p><div class="text">Benutzername</div><input id="bname" class="button" onkeyup="valid('#bname','#bntext')" onkeydown="valid('#bname','#bntext')" type="text" /><div id="bntext" class="hiddentext">Der Benutzername muss mindestens 4 Zeichen und darf maximal 8 Zeichen enthalten.</div></p>

CSS

.button{
    position:relative;
    left:0%;
}

.text{
    display:inline-block;
    position:relative;
    text-align:left;
    width:20%;
}
.hiddentext {
    /*display:none;*/
    color:#FF0000;  
}

这是 fiddle : http://jsfiddle.net/LGp8k/

Answer 1

使用 span 而不是 div 作为错误消息。

您希望错误消息内联显示。 span “自然地”是一个内联元素。如果您使用 block 元素 div，则必须将其样式设置为 display: inline。如果您使用的是 jQuery，您可能正在使用 .show() 来有条件地显示错误消息，并且默认情况下会将 display: block; 设置为您的 div 标记.对于 span，默认显示样式是内联的。