本站消息
将表单中的项目居中对齐
发布于2023-09-21 20:56 阅读(1142) 评论(0) 点赞(15) 收藏(2)
我是前端新手。我实际上想制作一个看起来像这样的标记，
所以，我尝试了以下方式，
<div className="row">
<div className="col-xs-4">
<div className="has-feedback">
<label className="control-label">Search Job</label>
<input type="text" className="form-control" id="inputValidation" placeholder="Search"/>
<span className="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
现在，在这里，我得到的是
谁能帮我这个？
解决方案
这是给你的完整代码:)
<!DOCTYPE html>
<html lang="en">
<head>
<title>form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.mi-abc {
padding: 10px;
display: inline-block;
background: lightgrey;
}
.mi-control {
width: 75%;
height: 35px;
padding-left: 10px;
}
.mi-icon {
position: absolute;
right: 30px;
top: 20px;
}
</style>
</head>
<body>
<div class="col-md-3 mi-abc">
<div class="wrapper">
<label class="mi-label">Search Job</label>
<input type="text" class="mi-control" placeholder="Search"/>
<span class="glyphicon glyphicon-search mi-icon"></span>
</div>
</div>
</body>
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/531588/0ee36fe35fdc2e6925f7/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
15
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)