2

ここにデモアプリケーションがあります。アプリケーションを開き、[追加]質問ボタンをクリックしてテーブル行を追加してください。4つのテーブル列が表示されます。これらの列のうち3つは、画像ファイル入力、ビデオファイル入力、およびオーディオファイル入力で構成されています。入力の1つで、関連するファイルを選択してアップロードすると、読み込みバーが表示されます。ただし、問題は、読み込みバーがテーブルセルの中央に表示されないことです。

私の質問は、各ファイル入力の読み込みバーを独自のテーブルセルの中央に配置するにはどうすればよいですか？

以下は、3つのファイル入力すべてでバーをロードするためのcssです。

.imagef1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

.videof1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

.audiof1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

以下は、各ローディングバーのhtmlです。

画像読み込みバー：

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
    </form>

ビデオローディングバー：

<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' > 
<p class='videof1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
</form>

オーディオローディングバー：

<form action='audioupload.php' method='post' enctype='multipart/form-data' target='upload_target_audio' onsubmit='return audioClickHandler(this);' class='audiouploadform' > 
<p class='audiof1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
</form>
4

1 に答える 1

0

要素position: absoluteの幅を自動に設定し、通常の位置から削除しています。ポジショニングを落とし、正常に流れるようにすることをお勧めします。これにより、画像がフィールドの中央に配置されますが、空白が開いていることにすぐに気付くでしょう。ポジショニングを削除し、要素をフローに戻しました。したがって、他の要素は、を活用しているため、そのスペースを尊重していますvisibility。toを使用visibility: hiddenするdisplay: noneと、表示値が切り替わるまで要素がスペースを占有しなくなります。

于 2012-12-31T01:37:06.733 に答える