HTML 文本字段的标签以三行显示答案

【问题标题】：HTML text field's label showing in three linesHTML 文本字段的标签以三行显示
【发布时间】：2017-11-28 06:46:46
【问题描述】：

我创建了一个输入文本字段并使用 html 为其指定了一个标签，但我没有在一行中显示标签，而是面临标签显示为三行的问题。

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

【问题讨论】：

因为你给它的宽度是 5px，删除它应该可以在不设置 nowrap 的情况下工作

标签： html css label textfield htmltext

【解决方案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>

【讨论】：

【解决方案2】：

试试这个 CSS，

label{
    white-space:nowrap;
}

但是你可以使用占位符而不是这样的标签

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

【讨论】：

【解决方案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">

【讨论】：

【解决方案4】：

请查看以下代码。从 CSS 中移除此处不需要的 position、left、top 属性。

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>

也许它会帮助你。谢谢。

【讨论】：