问题

Question

问题

我遇到了一个问题，我正在尝试创建表单输入行。这可行，但是，一旦总输入的宽度变得太大，一切都开始换行。我想要的是，水平滚动条显示在字段集内，并且单个服务项 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/

通过在 horizontal-fields 类中指定 width：300％，您会看到我已成功获得了我想要的内容。然而，这当然不是最佳的，因为宽度基本上是固定的并且不自动地适合服务项目div的宽度。

当然，这会使宽度大得多，但也总是显示水平滚动，即使不需要也是如此。

我尝试了什么

我尝试过使用 display：inline-block; 和空白：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)

我想这对我有用，因为我已经知道在水平字段上设置宽度可以正常工作，所以使用jQuery找出该宽度应该可能有效。但是，感觉我不应该需要jQuery，这将是一种黑客攻击。所以我想在合理可能的情况下避免使用它。

谢谢！

Answer 1

尝试这种方法：

<强> 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演示

Answer 2

由于某种原因，其他答案已被删除，我无法取回，所以不得不再次回答。

以前的答案是 -

如何删除浮点数并使用具有自动宽度的内联块，然后将.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/

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

问题

当前结果

我尝试了什么

2 个答案: