2

我正在尝试创建一个简单的基本表单，当将 input-append 类添加到表单时，我无法实现水平布局，它会踢第二个输入框以显示在同一行？想知道代码错误在哪里？请提出导致问题的原因

      <body>
        <div class="container">
          <hr/>

           <form class="form-horizontal">
            <!--<span class="offset2">Sign Into the Email</span>-->
               <div class="control-group">

                   <div class="controls"><span>Welcome to My Email</span></div>

                </div>

               <div class="control-group input-append">
                   <label for="emailid"  class="control-label">Email id</label>
                <div class="controls"> 

                    <input type="text" />
                   <span class="add-on">@</span>

                   </div>
                </div>

                 <div class="control-group input-append">
                    <label for="passwd" class="control-label">Password</label>
                    <div class="controls">
                        <input type="password" />
                        <span class="add-on">***</span>
                     </div>
                </div>

               <div class="control-group">
                   <div class="controls"  >
                   <label class="checkbox">
                       <input type="checkbox" />Remember Me
                    </label>
                   <button class="btn">Sign In</button>
                    </div>
               </div>
            </form>

        </div>    
            <script src="js/jquery.js"></script>
            <script src="js/bootstrap.js"></script>    
        </body>
4

1 回答 1

1

我只是把它input-append放在一个内部div

<div class="control-group">
    <div class="input-append">
        <label for="emailid" class="control-label">Email id</label>
        <div class="controls">
            <input type="text" /> <span class="add-on">@</span>

        </div>
    </div>
</div>

检查这个小提琴

.input-append有一个display: inline-block因此问题

于 2013-06-22T23:22:52.060 回答