Question

我有以下表格，我的按钮是图像按钮。我希望与电子邮件输入在同一行，但我无法弄清楚如何完成它。我使我的按钮向右浮动，但它没有与输入字段在同一行上对齐。

形式：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS：

.control-group{
float:left;
}

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

Answer 1

您可以使用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>

Answer 2

为了做到这一点，bootstrap中内置了一些类。您可以将form-inline课程添加到表单中，并将control-group课程替换为form-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>

Answer 3

你不必在<span>标签下包裹

<强>小提琴

<强> http://jsfiddle.net/m4rz38h7/2/

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

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

如何使一个按钮浮动在输入表单旁边？

3 个答案: