我想有一個div（包含文本）與textfield相同的行

我有一個具有一些描述的div，一個textfield和另一個div，並且出現一些錯誤消息，只有當輸入不正確時纔會出現。這全部包裹在p標籤中。我的問題是，我希望錯誤消息出現在文本字段和說明的同一行中，並且只有當文本太長時，纔會出現在下一行中的文字太多。但是我不知道該怎麼做，所有我嘗試的結果導致出現在下一行的整個錯誤消息。任何人都知道如何解決這個問題？我想有一個div（包含文本）與textfield相同的行

代碼： 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/

來源

2013-03-28 Jakob Abfalter

div的使用。 –

使用span而不是div的錯誤消息。

您希望錯誤消息以內聯方式顯示。 span是「自然」的內聯元素。如果您使用的是塊元素div，則必須將其樣式設置爲display: inline。如果您使用的是jQuery，則可能使用.show()來有條件地顯示錯誤消息，並且默認情況下會將display: block;設置爲您的div標記。使用span默認的顯示樣式是內嵌的。

來源

2013-03-28 13:20:06 Floremin

使用

float:left;

爲.button和.text區段

來源

2013-03-28 13:22:59 Venugopal

當你想顯示錯誤，你可以這個類設置爲div#bntext

.hiddentext-show { 
     display:inline;   
}

來源

2013-03-28 13:30:53 mehdi

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：在DIV的立場

http://jsfiddle.net/TNLZh/

來源

2013-03-28 13:36:46

我想有一個div（包含文本）與textfield相同的行

回答

相關問題