什麼是導致文本重疊？

我想知道如果文本對於單元格的寬度太大而不是僅僅進入下一行，那麼如何在表格單元格中附加一段文本與對方重疊？什麼是導致文本重疊？

比如我有一段文字它說的The file upload was successful，但它顯示的方式是如下：

enter image description here

下面是表格單元格的HTML和它的內容：

var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" + 
    "Video File: <input name='fileVideo' type='file' class='fileVideo' /></label>" + 
    "<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='Upload' /></label>" + 
    "<p class='listVideo' align='left'></p>" + 
    "<iframe class='upload_target_video' name='upload_target_video' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");

下面是jquery的在此它顯示相關消息：

function stopVideoUpload(success, videoID, videofilename){ 

     var result = ''; 
     videocounter++; 

     if (success == 1){ 
     result = '<span class="videomsg'+videocounter+'">The file was uploaded successfully</span>'; 
      $('.listVideo').eq(window.lastUploadVideoIndex).append('<input type="text" name="vidid" id="'+videoID+'" value="' + videoID + '" />'); 
      $('.listVideo').eq(window.lastUploadVideoIndex).append('<div>' + htmlEncode(videofilename) + '<button type="button" class="deletefilevideo" data-videoID="'+videoID+'" data-video_file_name="' + videofilename + '">Remove</button><br/><hr/></div>'); 
      } 


     $(sourceVideoForm).find('.videomsg').html(result); 
     $(sourceVideoForm).find('.videomsg').css('visibility','visible'); 
     $(sourceVideoForm).find(".fileVideo").replaceWith("<input type='file' class='fileVideo' name='fileVideo' />"); 
     $(sourceVideoForm).find('.videof1_upload_form').css('visibility','visible');  


     return true; 
}

下面是CSS：

.videof1_upload_process{ 
    position:relative; 
    visibility:hidden; 
    text-align:center; 
    margin-bottom:0px; 
    padding-bottom:0px; 
    margin-left: auto; 
    margin-right: auto; 
    } 

.videofileupload{ 
    text-align:center; 
    width:100%; 
    margin:0px; 
    padding:5px; 
    font-size:85%; 
    } 

.videouploadform{ 
    width:100%; 
} 

.listVideo{ 
    text-align:left; 
    margin:0; 
    padding-left:0; 
} 

.videomsg{ 
    line-height:0px; 
} 

#qandatbl{ 
    border:1px black solid; 
    border-collapse:collapse; 
    table-layout:fixed; 
}  

#qandatbl{ 
    width:100%; 
    margin-left:0; 
    float:left; 
} 

#qandatbl td { 
    vertical-align: middle; 
} 

#qandatbl th{ 
    border:1px black solid; 
    border-collapse:collapse; 
    text-align:center; 
}

來源

2013-01-21 user1881090

jsFiddle可能有用 – hohner

您是否有示例頁面？你可以用螢火蟲獲得很多信息。只需選擇重疊的單元格並在CSS中查找位置元素。問題可能與位置有關：相對; – iSenne

給我10分鐘的小提琴，@iSenne你知道我應該改變定位，因爲我把它改成絕對的但沒有區別，我喜歡相對位置，因爲它將加載杆放在正確的位置，因爲它放置它在表單元格水平居中的位置，您建議如何排列文本以保持加載欄水平居中在表格單元格中的位置？ – user1881090

問題是與以下規則：

.videomsg{ 
    line-height:0px; 
}

正如你所設定的line-height到0px有行之間沒有空格，這就是爲什麼他們重疊另一個。

來源

2013-01-21 23:22:48 tw16

好的趕上！ :-) – iSenne

@謝謝，我認爲會限制郵件和文件輸入之間的消息空間，但是沒有意識到它也會影響內容。謝謝：） – user1881090

什麼是導致文本重疊？

回答

相關問題