1

フォーム内に2つのボタンがあり、1つを左（前）に、もう1つを右（次/送信）に配置したいと思います。問題は、前のボタンを非表示にした場合（フォームの最初のタブにあるときに表示します）、次の/送信ボタンがコンテンツの外に移動することです。前のボタンが非表示になっているときに、ボタンを希望どおりに配置するにはどうすればよいですか？

ASP.NET：

  <div id="formContainer" style="padding:20px; margin-top:50px; margin-bottom:20px; width:600px; margin-left:auto; margin-right:auto; border:solid black 1px;background-color:#c6c6c6">
        <div id="recipeForm1">
              <!-- OMMITTED FOR Length Purposes -->
        </div>
        <div id="recipeForm2">
             <!-- OMMITTED FOR Length Purposes -->
            </table>
        </div>
        <div id="recipeForm3">
            directions
        </div>
        <div id="recipeForm4">
            Nutrition
        </div>

        <div id="recipeForm5">
            review
        </div>
        <div id="buttons"style="margin-left:auto; margin-right:auto; padding-top:30px;">
            <input id="btnPrevious" type="button" value="Previous" /> 
            <input id="btnNext" type="button" value="Next" style=" float:right;" />
        </div>

    </div>

必要に応じて、レシピのdivとボタンでjquery.showと.hideを使用します。私がrecipeform1を使用しているとき、前のボタンがなく、フォームは次のようになります。

ここに画像の説明を入力してください

私はそれをこのように見せたい（前に表示されたものを差し引いた）： ここに画像の説明を入力してください

4

1 に答える 1

4

clearfixソリューションを使用してください...

#buttons {
     overflow: hidden;
}

これは、次のボタンを右にフロートさせたために発生します。そのため、前のボタンを非表示にすると、その親要素が折りたたまれます（デフォルトでは、要素は拡張されてフロートされた要素を含みません）。

于 2013-03-23T22:47:31.250 に答える