Question

我想知道什么是垂直对齐输入字段和按钮没有 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>

小提琴： https://jsfiddle.net/5mxzu4m5/

我想要输入字段右侧的图标。真的很感谢所有的答案！：）

Answer 1

使用以下代码（只需添加display：inline-block＆amp; vertical-align：top on textbox and .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>

Answer 2

简单而时尚的解决方案：用链接替换src =“...”

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

试试这个CSS

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

Link For Reference

相应地设置你的按钮样式

希望这会有所帮助..

垂直对齐输入和按钮，无需自举

3 个答案: