我想将输入字段和按钮放在同一行中。我想为按钮设置固定大小,并且希望表单填充可用空间。我尝试创建自己的解决方案,但不幸的是该按钮低于输入字段。我怎样才能解决这个问题?
CSS:
.input-bar {
display: table;
width: 100%;
}
.input-bar-item {
display: table-cell;
}
.input-bar-item > button {
margin-left: 5px;
}
.width100 {
width: 100%;
}
HTML:
<div class="input-bar">
<div class="input-bar-item width100">
<form>
<div class="form-group">
<input class="form-control width100">
</div>
</form>
</div>
<div class="input-bar-item">
<button class="btn btn-info">MyButton</button>
</div>
</div>
https://plnkr.co/edit/5clqg067q4DiMHRkoPEY?p=preview https://plnkr.co/edit/5clqg067q4DiMHRkoPEY?p=preview
您可以做几件事。一种是使用内联表单,另一种是使用输入组和input-group-btn
。这是一个笨蛋:https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM?p=preview https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM?p=preview
我的偏好是input-group-btn
<div class="input-group">
<input class="form-control width100">
<span class="input-group-btn">
<button class="btn btn-info">MyButton</button>
</span>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)