0

問題

フォーム入力の行を作成しようとしているときに問題が発生しました。これは問題なく機能しますが、入力の合計の幅が大きくなりすぎると、すべてが折り返され始めます。私が欲しいのは、水平スクロールバーがフィールドセット内に表示され、単一のサービスアイテム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/

水平フィールドクラスで幅300％を指定することで、必要なものを取得できたことがわかります。ただし、幅は基本的に固定されており、サービスアイテムdivの幅に自動的に適合しないため、これはもちろん最適ではありません。

もちろん、これにより幅が必要以上に大きくなりますが、不要な場合でも常に水平スクロールが表示されます。

私が試したこと

display：inline-block;を使用してみました。および空白：ラップなし。。ただし、前者は私にはあまり効果がないようで、後者は最初のいくつかのフォームアイテムに対してのみ機能し、service-additional- fieldsdiv内のアイテムに対しては機能しませんでした。

残念ながら、後者の項目はjQueryを使用して動的に挿入されるため、service-additional-fields divにあります。したがって、それらを削除することは可能ですが、JavaScriptが単純になるため、そのままにしておきます。

私はここで見つけた解決策を適応させようとしましたが、ほとんど成功しませんでした：http ://www.css-lab.com/demos/image-display/side-scroll-gallery.html

後者のフォーム要素がまだラップされている同様の状況になってしまいました。

ここにあるjQueryソリューションのようなことも検討しました：内部に多くの小さなDIVがあるDIVの水平スクロール（テキストなし）

水平フィールドに幅を設定することは問題ないことをすでに知っているので、これは私にとってはうまくいくと思います。したがって、jQueryを使用してその幅を見つけることはおそらくうまくいくでしょう。ただし、jQueryは必要ないように感じ、一種のハックになります。ですから、合理的に可能であれば避けたいと思います。

ありがとう！

4

2 に答える 2

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

于 2012-11-12T11:56:34.993 に答える
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/

于 2012-11-12T13:27:40.257 に答える