表单2-内联表单

在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。

只适用于视口（viewport）至少在 表单内容总宽度 时（视口宽度再小的话就会使表单折叠）。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。

代码：

<form class="form-inline">
			
			<!--如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。-->
			
			<div class="form-group">
			    <label for="exampleInputName">Name</label>
			    <input type="text" class="form-control" id="exampleInputName" placeholder="Alisa">
			</div>
			
			
			<div class="form-group">
			    <label for="exampleInputEmail">Email</label>
			    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Alisa@example.com">
			</div>
			
			
			<button type="submit" class="btn">Send invitation</button>
			
			
		</form>
		

样式：

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.form-inline .form-group {
				margin-right: 10px;
			    display: inline-block;
			    vertical-align: middle;
			}
			
			.form-inline .form-group label {
				height: 34px;
				font: normal 700 16px/34px "微软雅黑";
			}
			
			.form-inline .form-group input {
				width: auto;
				height: 34px;
				outline-color: skyblue;
				outline-offset: inherit;
				border: 1px solid #ccc;
				border-radius: 4px;
				padding-left: 10px;
				font: normal normal 14px/34px "微软雅黑";
			}
			
			.form-inline .btn {
				width: auto;
				height: 34px;
				padding: 0 8px;
				font: normal normal 16px/34px "微软雅黑";
				vertical-align: middle;
				border: 1px solid #ccc;
				border-radius: 4px;
				background-color: #fff;
				outline-color: skyblue;
			}
			
			.form-inline .btn:hover {
				background-color: #eee;
			}
			
			.form-inline .btn:active {
				outline: none;
				background-color: #666;
				color: #fff;
			}
			
			
			
		</style>

效果：