CSS布局强制表单元素水平滚动

Question

问题

我在尝试创建表单输入行时遇到了问题。这可以正常工作，但是，一旦总输入的宽度变得太大，一切都会开始包装。我想要一个水平滚动条出现在字段集中，并使单个 service-item 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/

你会看到我已经通过在 horizo​​ntal-fields 类中指定 width: 300% 来获得我想要的东西。但是，这当然不是最优的，因为宽度基本上是固定的，并且不会自动适应服务项 div 的宽度。

当然，这会使宽度比它需要的大得多，而且总是显示水平滚动，即使在不需要时也是如此。

我尝试过的

我尝试过使用 display: inline-block; 和 whitespace: no-wrap;。但是，前者似乎对我没有多大作用，而后者仅对前几个表单项有效，而不是 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)

我想这对我有用，因为我已经知道在 horizo​​ntal-fields 上设置宽度可以正常工作，因此使用 jQuery 来找出应该是什么宽度可能会起作用。但是，感觉我不应该需要 jQuery，这有点像 hack。因此，如果可能的话，我想避免它。

谢谢！

Answer 1

由于某种原因，另一个答案已被删除，我无法找回它，因此不得不再次回答。

以前的答案是 -

如何删除浮动并使用自动宽度的内联块，然后将 .service-additional-fields 也作为内联块？

编辑以获得更完整的答案。

HTML

<fieldset>
        <legend>Fourth: Add Services</legend>
        <div id="slide-wrap">
            <div id="inner-wrap">
                <div class="horizontal-fields service-item">
                    <button class="addField">+</button>
                    <label>Text Box:</label>
                    <input type="text">
                    <label>Text Box:</label>
                    <input type="text">
                    <!-- Additional form fields are dynamically inserted here. -->
                    <div class="service-additional-fields">
                        <!-- Additional fields for DSL Tails -->
                        <label>Text Box:</label>
                        <input type="text">
                        <label>Text Box:</label>
                        <input type="text">
                    </div>
                </div>
                <div class="horizontal-fields service-item">
                    <button class="addField">+</button>
                    <label>Text Box:</label>
                    <input type="text">
                    <label>Text Box:</label>
                    <input type="text">
                    <!-- Additional form fields are dynamically inserted here. -->
                    <div class="service-additional-fields">
                        <!-- Additional fields for DSL Tails -->
                        <label>Text Box:</label>
                        <input type="text">
                        <label>Text Box:</label>
                        <input type="text">
                        <label>Text Box:</label>
                        <input type="text">
                    </div>
                </div>
           </div>
        </div>
    </fieldset>

CSS

#slide-wrap {
    margin:0 auto;
    overflow: auto; 
    background:#BCC5E1;
    border:1px solid #000;
}
#inner-wrap {
    float:left;
    margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px     (-999em could cause problems with large font sizes)*/
    padding-left:20px;        
    width: auto;
}

div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
    width: auto;
}

/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
    display: block;
}

.service-additional-fields {
    display:inline-block;
}​

演示

http://jsfiddle.net/aLKHJ/1/

Answer 2

试试这个方法：

HTML：

<div id="slide-wrap">
    <!-- + First row -->
    <div class="row">
      <!-- All elements here -->
    </div>
    <!-- - First row --> 

    <!-- + Second row -->        
    <div class="row">
      <!-- All elements here -->
    </div>
    <!-- - Second row -->  
</div>

CSS：

#slide-wrap {
  margin:0 auto;
  overflow: auto; 
  background:#BCC5E1;
  border:1px solid #000;
  width: 400px; /*  for example */
  padding-left:20px;
}

div.row {
  float:left;
  white-space: nowrap;
}

放轻松，我真的对内部样式感到困惑，所以我删除了它们。 JsBin演示