[英]HTML 5 / CSS button beside dropdown list
我正在尝试在我的选择选项下拉菜单旁边添加一个提交按钮。 我似乎无法在消息框上方正确对齐。
它位于基本的div中,但认为它不是必需的。
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
我修改了代码中的行和列,您可以在此JSFiddle中找到它,希望对您有所帮助。
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.