如何使按鈕在輸入表單旁邊浮動？

我有以下表單，我的按鈕是一個圖像按鈕。我希望與電子郵件輸入處於同一行，但我無法弄清楚如何完成它。我將按鈕向右移動，但不與輸入欄位對齊。如何使按鈕在輸入表單旁邊浮動？

形式：

.control-group{ 
 
    float:left; 
 
    } 
 

 
    .control-group.button{ 
 
    clear:both; 
 
    }

<form class="well email-form" id="emailForm" name="sendEmail" novalidate="" method="post"> 
 
    <div class="col-sm-6"> 
 
\t <div class="control-group"> 
 
\t <div class="field-control"> 
 
\t  <input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/> 
 
\t </div> 
 
\t </div> 
 
\t <div class="control-group button"> 
 
\t <div class="field-control"> 
 
\t \t <input type="image" src="http://placehold.it/25x25" name="submitEmail" class="button"/> 
 
\t </div> 
 
\t </div> 
 
    </div> 
 
</form>

CSS：

.control-group{ 
float:left; 
} 

.control-group.button{ 
clear:both; 
}

來源

2014-11-03 Arwen

擺脫了明確的呢？ – j08691 2014-11-03 17:03:59

它的工作，我認爲，因爲div是一個塊，我不得不使用清除並排對齊 – Arwen 2014-11-03 17:06:12

清除一個元素意味着它將向下移動到浮動元素下方。 – j08691 2014-11-03 17:07:10

您可以使用display: inline-block和vertical-align: bottom，如：

.control-group { 
 
    display: inline-block; 
 
} 
 
input[type="image"].button { 
 
    vertical-align: bottom; 
 
}

<form class="well email-form" id="emailForm" name="sendEmail" novalidate="" method="post"> 
 
    <div class="col-sm-6"> 
 
    <div class="control-group"> 
 
     <div class="field-control"> 
 
     <input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" " /> 
 
     </div> 
 
    </div> 
 
    <div class="control-group button"> 
 
     <div class="field-control"> 
 
     <input type="image" src="http://placehold.it/25x25" name="submitEmail" class="button" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

來源

2014-11-03 17:16:43

有一些內置在引導程序中的類來執行此操作。您可以將form-inline類添加到您的表單中，並用form-group替換您的control-group類。這樣您就不必創建任何自定義CSS來進行對齊。除此之外，您也不需要field-control class/div，除非這是您的自定義CSS的一部分。

<form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <div class="field-control"> 
       <input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" " /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="field-control"> 
       <input type="image" src="images/tree.png" name="submitEmail" class="button" /> 
      </div> 
     </div> 
    </div> 
</form>

來源

2014-11-03 17:17:13 mikelt21

你不要有下<span>標籤

小提琴包裹

http://jsfiddle.net/m4rz38h7/2/

.control-group{ 
    display:inline-block; 
     margin:0; 
     padding:0; 
     vertical-align:top; 
    } 

    .button{ 
     width:20px; 
     height:20px; 
    }

來源

2014-11-03 17:35:10

如何使按鈕在輸入表單旁邊浮動？

回答

相關問題