html – 一行中的内联表单,输入字段上方有标签

概述我正在使用 angularjs和bootstrap 3作为css构建一个Web应用程序(我对css的知识非常有限).我想创建一个内联表单,其中包含5个输入字段和标签,位于它们之上.第一场需要占据比其他场更多的空间. 我在这里尝试了一下：http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview 这是我尝试的标记： <link href="http://m 我正在使用 angularjs和bootstrap 3作为CSS构建一个Web应用程序(我对CSS的知识非常有限).我想创建一个内联表单,其中包含5个输入字段和标签,位于它们之上.第一场需要占据比其他场更多的空间.

我在这里尝试了一下：http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview

这是我尝试的标记：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/CSS/bootstrap.min.CSS" rel="stylesheet" /><form name="form" novalIDate="" ng-submit="processForm()" >  <div >    <label  for="location"><i ></i> Location</label>    <input  ID="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />  </div>  <div >    <label  for="startDate"><i ></i> Pickup date</label>    <input  ID="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />  </div>  <div >    <label  for="startTime"><i ></i> Pickup</label>    <select  ID="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">    </select>  </div>  <div >    <label  for="endDate"><i ></i> Dropoff date</label>    <input  ID="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"    />  </div>  <div >    <label  for="endTime"><i ></i> Dropoff</label>    <select  ID="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">    </select>  </div>  <div >    <input type="submit" value="Search" ng-Disabled="form.$invalID"  Disabled="Disabled" />  </div></form>

这是当前plnkr呈现标记的方式：

解决方法 添加我的评论作为答案,因为我猜它可能是解决方案.

你正在使用4 4 3 4 3 = 18列.将这些限制为总共超过12个.确定哪些可以缩小.

@H_502_29@ 总结

以上是内存溢出为你收集整理的html – 一行中的内联表单,输入字段上方有标签全部内容，希望文章能够帮你解决html – 一行中的内联表单,输入字段上方有标签所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。