无法内联呈现输入答案

【问题标题】：Can't render input inline无法内联呈现输入
【发布时间】：2020-10-25 04:52:49
【问题描述】：

我正在尝试创建一个带有指示其用途的图标的输入，但它并没有呈现我喜欢的方式：

我希望输入与图标处于同一级别，但是，尽管我尽了最大努力：

.field
{
    margin: auto;
    border-radius: 10px;
    width: 67%;
    white-space: nowrap;
    overflow-x: auto;
}
.field input, .field label
{
    display: inline-block !important;
    margin: 0;
    padding: 0;
}

<div class = 'field w3-bar w3-center w3-border w3-border-green'>
    <label class='w3-bar-item w3-left  w3-border-right w3-border-green fas fa-user' for='username'></label>

    <input class="w3-bar-item w3-right w3-input w3-border-green w3-hover-border-green no-box" id="username" name="username" required type="text" value="">
</div>

——它仍然在新行上渲染！请注意，我使用的是 w3.css 和 font-awesome。有什么我想念的吗？谢谢。

【问题讨论】：

尝试将align-items:center或vertical-align: center添加到带有classfield的div

标签： html css web w3.css

【解决方案1】：

这样怎么样？

.custom-input{
  display:inline-block;
  margin-left:12px;
}
.input-component{
  border:3px solid teal;
  padding:8px;
  padding-left:30px;
}
.input-icon{
  color:teal;
  position:absolute;
  margin-right:-30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<div class="custom-input">
   <span class="glyphicon glyphicon-user  input-icon"></span>
   <input class="input-component" placeholder="username...">
</div>

<div class="custom-input">
   <span class="glyphicon glyphicon-calendar  input-icon"></span>
   <input class="input-component" type="date">
</div>

<br>
<br>

<div class="custom-input">
   <span class="glyphicon glyphicon-lock input-icon"></span>
   <input class="input-component" type="password" placeholder="password"/>
</div>

【讨论】：

【解决方案2】：

您可以将代码最小化为：

<div style="width: 67%;display:flex; align-items:center;" class ="w3-padding w3-margin w3-border w3-border-green w3-round-large">
    <label style="width:10%" class="w3-center w3-border-right w3-border-green fa fa-user" for="username"></label>
    <input style="width:80% " class="w3-input" id="username" name="username" required type="text" value="">
</div>

而且您不需要定义“字段”类和其他类。

【讨论】：