问题
我在尝试创建表单输入行时遇到了问题。这可以正常工作,但是,一旦总输入的宽度变得太大,一切都会开始包装。我想要的是水平滚动条出现在字段集中,并且单个服务项div 的所有表单元素保持在一行上。
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
当前结果
这是一个显示当前状态的表单的 JSFiddle,我已经包含了我认为相关的所有基本 CSS/HTML:http: //jsfiddle.net/FjxqG/3/
你会看到我已经通过在水平字段类中指定width: 300%来获得我想要的东西。然而,这当然不是最优的,因为宽度基本上是固定的,并且不会自动适应服务项 div 的宽度。
当然,这使得宽度比它需要的大得多,但也总是显示水平滚动,即使在不需要时也是如此。
我试过的
我试过使用display: inline-block; 和空格:不换行;. 但是,前者似乎对我没有多大作用,后者仅对前几个表单项有效,对service-additional-fields div 内的项无效。
不幸的是,我在 service-additional-fields div 中有后面的项目,因为它们是使用 jQuery 动态插入的,所以虽然可以将它们取出,但我宁愿把它们留在里面,因为它使 JavaScript 更简单。
我尝试调整此处找到的解决方案,但收效甚微:http ://www.css-lab.com/demos/image-display/side-scroll-gallery.html
最终出现了类似的情况,其中后一个表单元素仍在包装。
我也考虑过做一些类似于这里找到的 jQuery 解决方案:Horizontal scroll in DIV with many small DIV's inside (no text)
我想这对我有用,因为我已经知道在水平字段上设置宽度可以正常工作,所以使用 jQuery 来找出应该是什么宽度可能会起作用。但是,感觉我不应该需要 jQuery,这有点像 hack。因此,如果可能的话,我想避免它。
谢谢!