我想知道什么是垂直对齐输入字段和按钮的最佳方式没有 Bootstrap。
这是它看起来正确的样子:
部分代码:
<!doctype html>
<title>Postnummer</title>
<div class="container-fluid">
<div class="divider"></div>
<div class="row">
<div class="col-md-12">
<form class="navbar-form">
<div class="input-group">
<input style="height:50px; color: black; border-radius: 0px;" type="number" id="searchZipCode"class="form-control" placeholder="Sök postnummer">
<div class="input-group-btn">
<a id="submitBtn">
<button style="height:50px; border-radius: 0px" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
fiddle : https://jsfiddle.net/5mxzu4m5/
我想要输入字段右侧的图标。真的很感谢大家的回答! :)
最佳答案
使用下面的代码(刚刚添加了 display:inline-block & vertical-align:top on textbox 和 .input-group-btn，增加了按钮高度)
<div class="container-fluid">
<div class="divider"></div>
<div class="row">
<div class="col-md-12">
<form class="navbar-form">
<div class="input-group" style="text-align: center">
<input style="height:50px; color: black; border-radius: 0px; display: inline-block; vertical-align:top; margin-right:-4px; " type="number" id="searchZipCode"class="form-control" placeholder="Sök postnummer">
<div class="input-group-btn" style="display: inline-block; vertical-align:top">
<a id="submitBtn">
<button style="height:56px; border-radius: 0px;" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
关于html - 没有 Bootstrap 的垂直对齐输入和按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44908986/