HTMLテキストフィールドのラベルが3行に表示されます

Question

入力テキストフィールドを作成し、htmlを使用してラベルを指定しましたが、ラベルを1行に表示するのではなく、ラベルが3行で表示されているという問題に直面しています。

label { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 5px; 
 
    top: 0px; 
 
    left: -193px; 
 
    color: #999; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-size: 16px; 
 
    font-weight: lighter; 
 
    z-index: 1; 
 
    transition: all 0.2s ease-in; 
 
}

<input type="text" name="verficationcode" required autocomplete="off"> 
 
<label for="verficationcode">Enter code here</label>

Image

Answer 1

コメントアウトまたはwidthプロパティを調整する：

label { 
 
    display: inline-block; 
 
    position: relative; 
 
    /*width: 5px;*/ 
 
    top: 0px; 
 
    /*left: -193px;*/ 
 
    color: #999; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-size: 16px; 
 
    font-weight: lighter; 
 
    z-index: 1; 
 
    transition: all 0.2s ease-in; 
 
}

<input type="text" name="verficationcode" required autocomplete="off"> 
 
<label for="verficationcode">Enter code here</label>

Answer 2

試してこのCSS、

label{ 
    white-space:nowrap; 
} 

いますが、この

<input type="text" name="verficationcode" required autocomplete="off" placeholder="Enter verification code here"> 

Answer 3

HTMLの

変更位置と、このCSSに

label{ 
    display: inline-block; 
    position: relative; 
    top:0px; 
    padding-right:15px; 
    color:#999; 
    font-family:'Helvetica', sans-serif; 
    font-size:16px; 
    font-weight: lighter; 
    z-index:1; 
    transition: all 0.2s ease-in; 
} 

label{ 
 
    display: inline-block; 
 
    position: relative; 
 
    top:0px; 
 
    padding-right:15px; 
 
    color:#999; 
 
    font-family:'Helvetica', sans-serif; 
 
    font-size:16px; 
 
    font-weight: lighter; 
 
    z-index:1; 
 
    transition: all 0.2s ease-in; 
 
}

<label for="verficationcode">Enter code here</label> 
 
<input type="text" name="verficationcode" required autocomplete="off">

を使用してのようなラベルの代わりにプレースホルダを使用することができます

Answer 4

以下のコードを確認してください。 ここでは不要な位置、左、上のプロパティをCSSから削除します。

label{ 
 
    display: inline-block; 
 
    width: auto; 
 
    color:#999; 
 
    font-family:'Helvetica', sans-serif; 
 
    font-size:16px; 
 
    font-weight: lighter; 
 
    z-index:1; 
 
    transition: all 0.2s ease-in; 
 
}

<input type="text" name="verficationcode" required autocomplete="off"> 
 
<label for="verficationcode">Enter code here</label>

それはあなたを助けるかもしれませ。おかげさまで