html - Bootstrap 输入文本与插件不对齐

Question

我对如何使输入文本在我的选项卡上对齐有点困惑，请参见下图以获得更好的可视化效果。 http://i59.tinypic.com/2nrlyd1.png 这是代码:

HTML

<div class="row">
                            <div class="tabbable tabs-left">
                               <ul class="nav nav-tabs">
                                   <li><a href="#a" data-toggle="tab">Public</a></li>
                                   <li><a href="#c" data-toggle="tab">Private</a></li>
                                   <li><a href="#c" data-toggle="tab">Pending</a></li>
                                   <li><a href="#c" data-toggle="tab">Rejected</a></li>
                                   <li>
                                   <li>
                                      <div class="input-group merged">
                                        <input class="form-control" placeholder="Search">
                                        <span class="input-group-addon"><i class="fa fa-arrow-circle-left fa-fw"></i></span>
                                      </div>
                                 </li>
                               </ul>
                            <div class="tab-content">
                             <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
                                 Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                             <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                                 Aliquam in felis sit amet augue.</div>
                             <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                                 Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                            </div>
                           </div> <!-- /tabs -->
                        </div><!--row -->  

这是为带有插件的输入文本提供的 CSS

.input-group-addon {background-color: #fff;}
.merged input:first-child{border-right: 0px;}
.merged .input-group-addon + input{border-left: 0px;}

Answer 1

要解决此问题，请将输入文本放入另一个 div 或类似的东西中，然后为该 div 设置最大大小，然后将输入文本作为子项放入其中，只要你喜欢 max-width: 100%, max-height: 100%, 等等。

例子:

<div class="parent">
   <div class="child">
      <input //code goes here>
   </div>
</div>

.parent {
   width: 100px;
   height: 50px;
}

.child {
   max-width: 100%;
   max-height: 100%;
}

input {
   display: block; 
   margin: auto;
}