1

誰でもこのdivを垂直に整列するのを手伝ってもらえますか?私はsecondDiv下に行きたいですfirstDiv。私は多くの投稿を見ましたが、それを解決できませんでした。誰でも私のコードを変更して動作させることができます。

<div>
    <div style="position:relative;width:800px;margin:0;padding:0">
        <div id="firstDiv" style="text-align:center;position:absolute;margin-top:0">
            <div>
                <span>
                    <input type="submit" title="" value="Select Photos From Your Computer"
                    name="sendBtn">
                </span>
            </div>
            <div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100">
                <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
                    <input type="file" style="opacity:0;font-size:20px;" accept="image/*"
                    name="d" id="d">
                </form>
            </div>
        </div>
        <div id="secondDiv" style="text-align:center;margin:3px 0 12px;">
            <span>You can add upto</span>
            <span style="font-weight:bold">3 Photos</span>
        </div>
    </div>
</div>
4

4 に答える 4

2

firstDiv の style 属性から「position:absolute」を削除すると、質問に答えているようです。

これにより、物事が動き回る結果にもなります。したがって、あなたが望むものを正確に説明する必要があります。

何か凝ったこと (メニューバーやウィンドウ内のウィンドウポップアップなど) を行う場合を除き、position:absolute と position:fixed の使用は避けるべきです。したがって、すべての「position:...」と「top:...」を削除します。

そして、なぜ不透明度0のファイル入力が真ん中にあるのですか? 非表示にして空のスペースも削除する場合は、それを「display: none」に変更します (また、再表示するには、「display: block」(div のように) または「display: inline」(span のように)))。

ここでは、不透明度が表示に変更され、すべての配置要素 (top:、position: など) が削除されています。

<html>
<head>
<style>
</style>
</head>
<body>
    <div>
        <div style="width: 800px; margin: 0px; padding: 0px">   
            <div id="firstDiv" style="text-align: center; margin-top: 0">
                <div>
                    <span>
                        <input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" />
                    </span>
                </div>
                <div style="width:492px; height:20px; overflow:hidden; z-index:100">
                    <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
                        <input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" />
                    </form>
                </div>
            </div>
            <div id="secondDiv" style="text-align: center; margin: 3px 0 12px;">
                You can add up to
                <span style="font-weight:bold">3 Photos</span>
            </div>   
        </div>
    </div>
</body>
</html>

他の人の回答に関するコメントを読んだ後、これを試してください：http://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-入力型ファイルの

于 2012-04-18T10:08:02.553 に答える
0

divのように変更されました

>  <div id="firstDiv" style="text-align:center;margin-top:0;">

そして、あなたはこの出力のようになります

ここに画像の説明を入力

于 2012-04-18T10:00:05.133 に答える
0

position: absolute;から削除するfirstDivと機能します...例についてはこちらを参照してください

于 2012-04-18T09:58:46.053 に答える
0

削除position:absolute;するfirstdiv

于 2012-04-18T09:58:53.027 に答える