0

jQueryモバイルフォームとCSSを使用するのは初めてです。divに含まれるjQueryMobileフォームを作成しました。フォーム要素の位置を、で調整できるようにしたいと思いますが、今のところうまくいきません。以下では、CSSを使用して、[送信]ボタンをコンテナの下部に揃えようとしましたが失敗しました。誰かがこれを行うための良い方法を提案できますか？

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
    />
    <style type="text/css">
        #submitButton {
            position: absolute;
            bottom: 0%;
            width: 50px;
        }
    </style>
</head>

<body>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <div id="lr" style="height: 500px;">
                <form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
                    <label for="select-choice-0" class="select">Select Label:</label>
                    <select name="select-choice-0" id="select-choice-0">
                        <option value="item1">Item 1</option>
                        <option value="item2">Item 2</option>
                        <option value="item3">Item 3</option>
                        <option value="item4">Item 4</option>
                    </select>
                    <div id="preview"></div>
                    <button type="button" data-theme="a"
                    name="Choose" value="submit-value">Choose</button>
                    <label for="textarea">Text Area Label:</label>
                    <textarea name="textarea" id="textarea-a"></textarea>
                    <button id="submitButton" class="ui-btn-top" type="button"
                    data-theme="a" name="Publish" value="Upload">Submit</button>
            </div>
            </form>
        </div>
    </div>
    </div>
</body>

4

1 に答える 1

2

JQMはhtmlを変更し、元のボタンに多くのクラスを適用します。要素を調べると、まったく異なって見えることがわかります。JQMが作成したもので遊ぶ代わりに、ボタンを別のdivでラップして、そのdivを配置することができます。すなわち

<div id="submitBtnWrap">
    <button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button>
</div>

次に、cssをラッパーdivに適用します。

#submitBtnWrap {
    position: absolute;
    bottom: 0%;
    width: 50px;
}
于 2012-04-28T01:00:13.833 に答える