Html 强制表单元素水平滚动的CSS布局 问题

我在尝试创建表单输入行时遇到了一个问题。但是，一旦总输入的宽度过大，所有内容都开始换行。我希望在字段集中显示一个水平滚动条，并且单个服务项目的所有表单元素保持在一行上

<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>

-
姓名：
说明：
FNN：
+

当前结果 下面是一个JSFIDLE，它显示了表单的当前状态，我已经包括了我认为相关的所有基本CSS/HTML：

您将看到，通过在horizontal fields类中指定width:300%，我成功地获得了我想要的。但是，这当然不是最优的，因为宽度基本上是固定的，并且不会自动适应服务项div的宽度

当然，这会使宽度比需要的大很多，但也会始终显示水平滚动，即使不需要

我试过的 我试过使用显示：内联块和空白：无换行符。然而，前者似乎对我没有多大帮助，而后者只适用于前几个表单项，而不适用于服务附加字段div中的表单项

不幸的是，我在ServiceAdditionalFields div中有后面的项目，因为它们是使用jQuery动态插入的，所以尽管可以将它们删除，但我还是宁愿将它们保留在那里，因为这样可以使JavaScript更简单

我尝试过采用此处找到的解决方案，但收效甚微：

最后出现了类似的情况，其中后一种形式的元素仍在包装中

我还考虑过做一些类似于jQuery的解决方案：

我想这对我来说是可行的，因为我已经知道在水平字段上设置宽度是可行的，所以使用jQuery找出宽度应该是多少可能是可行的。然而，我觉得我不应该需要jQuery，这将是一种黑客行为。因此，如果可能的话，我想尽量避免

谢谢

试试这种方法：

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>

#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;
}

别紧张，我真的对内在风格感到困惑，所以我把它们去掉了。

---

演示

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

先前的答覆是—

删除浮动并使用具有自动宽度的内联块，然后将.service附加字段也作为内联块，怎么样

编辑以获得更完整的答案

HTML

演示

---

谢谢。但是，一旦我将其他表单元素放入“ServiceAdditionalFields”div，我就无法让它工作。这就是我不断遇到问题的地方。我更愿意将这些字段保留在其中，因为它们是动态插入的，如果所有表单项都在一个div中，则使用它们会更困难：-（@Geekman没有不能解决的问题。你能在

服务附加字段

div中放置一些示例元素，让我知道到底发生了什么吗？你能避免在包含所有表单元素的容器中出现滚动条吗？我想这样会更好。你在别人的网站上看到过l的行为吗喜欢吗？使用通用的可用性方法是很好的。是否可以在动态插入的字段中循环（等等）获取它们的宽度，然后使用javascript设置外部宽度？JSFIDLE链接几乎显示了我正在尝试做的事情。正如我所说的，它是固定的，不适应表单元素的宽度。我很确定我以前见过这样做，但没有具体的示例（尽管我可以寻找一些）。如果你有什么好主意，我会接受的。我只是不想让表单元素包装起来，因为它看起来很乱。是的。正如我在“我尝试过的”下链接的那样，我可以这样做。但我想避免这样做，因为我似乎不需要依赖jQuery。如果这样做合理的话，我想要一个全CSS解决方案。很抱歉，我应该在阅读时考虑一下。删除浮动并使用自动宽度的内联块，然后像中那样为.service附加字段线路阻塞了吗？

<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>

#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;
}​