没有 bootstrap 的垂直对齐输入和按钮

Question

我想知道什么是垂直对齐输入字段和按钮的最佳方式 without 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/

我想要输入字段右侧的图标。真的很感谢大家的回答！ :)

Answer 1

简单而流畅的解决方案：将 src="..." 替换为您的 link

HTML

<div>
<input type="text" id="text1">
<br>
<img src="http://findicons.com/files/icons/1264/clearblack/128/find.png" height="50px" width="50px">
</div>

CSS

img{
  float:right;
}
div{
  width:90px;
}

Answer 2

使用下面的代码（刚刚在文本框和 .input-group-btn 上添加了 display:inline-block & vertical-align:top，增加了按钮高度）

<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>

Answer 3

试试这个 CSS

.input-group{
  display:table;
}
.form-control,.input-group-btn
{
  display:table-cell;
  vertical-align:middle;
}

Link For Reference

相应地设计您的按钮

希望这对您有所帮助..

没有 bootstrap 的垂直对齐输入和按钮

Vertical align input and button without bootstrap

html

css

web-deployment