如何解决无法内联呈现输入
我正在尝试创建一个带有图标的输入,以指示其用途,但它并未呈现我喜欢的样子:
我希望输入的内容与图标相同,但是尽我最大的努力:
.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。有什么我想念的吗?谢谢。
解决方法
这样怎么样?
.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>
,
您可以将代码最小化为以下形式:
<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>
您不需要定义类“ field”和其他类。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。