Question

我有一个带有一些描述的div，一个textfield和另一个带有一些错误信息的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;  
}

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

Answer 1

使用span代替div作为错误消息。

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

Answer 2

使用

 float:left;

for .button和.text

Answer 3

如果要显示错误，可以将此类设置为div#bntext

.hiddentext-show {
      display:inline;           
 }

Answer 4

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/

我希望div（包含文本）与文本字段相同

4 个答案: