0

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

代码： 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;  
}

这是小提琴：http: //jsfiddle.net/LGp8k/

4

4 回答 4

3

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

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

于 2013-03-28T13:20:06.617 回答
1

采用

 float:left;

对于 .button 和 .text

于 2013-03-28T13:22:59.503 回答
1

当您想显示错误时，可以将此类设置为div#bntext

.hiddentext-show {
      display:inline;           
 }
于 2013-03-28T13:30:53.943 回答
1 
float:left

<p><div class="text">Benutzername</div><input id="bname" class="button" onkeyup="valid(this.value)" type="text" /><div id="bntext" class="hiddentext">Der Benutzername muss mindestens 4 Zeichen und darf maximal 8 Zeichen enthalten.</div></p>
<script>
    function valid(val)
    {
     var elem = document.getElementById("bntext");
         if(val.length>8)
          {
             elem.style.display='block';
          }
    else
    {
      elem.style.display='none';
    }
    }
</script>

CSS：

.button{
    position:relative;
    left:0%;
}
.p
{
    float:left;
}
.text{
    display:inline-block;
    position:relative;
    text-align:left;
    width:20%;
}
.hiddentext {
    display:none;
    float:right;
    color:#FF0000;  
}

这里jsfiddle：

http://jsfiddle.net/TNLZh/

于 2013-03-28T13:36:46.360 回答