0

I have created a input text field and given a label to it using html but instead of showing label in one line I am facing problem that the label is showing in three lines.

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

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
Destro
  • 13
  • 1
  • 5

4 Answers4

1

Comment out or adjust the width property:

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>
VXp
  • 11,598
  • 6
  • 31
  • 46
0

try this css,

label{
    white-space:nowrap;
}

but you can use placeholder instead of label like this

<input type="text" name="verficationcode" required autocomplete="off" placeholder="Enter verification code here">
veera
  • 329
  • 1
  • 6
0

Change Position of html and using this 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">
Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25
0

Please review below code. Remove position, left, top property from CSS that is not needed here.

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>

May be it will help you. Thanks.

Nency
  • 21
  • 2