我有一个包含两个大单元格的表格，左边的单元格包含两个下拉菜单和我遇到问题的 JQuery UI 按钮，右边的单元格包含一个从 AJAX 数据库查询生成的列表。随着列表的增长，按钮会越来越向上移动，直到它开始挡住其中一个下拉菜单。当我将鼠标悬停在按钮上时，它会向下移动页面几厘米。无论列表有多大，这个按钮总是在鼠标悬停时向下移动，我不知道为什么或如何防止这种情况发生。
JQuery:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
$(document).ready(function(){
$("#createReport").button({
icons: {
primary: "ui-icon-document"
}
});
});
</head>
表:
<table style="width:600px;table-layout:fixed;"><tr>
<td style="height:10px;background-color:#3882C7;color:#FFD23A;"><b>Create New Reports</b></td>
<td style="height:10px;background-color:#3882C7;color:#FFD23A;"><b>Reports Completed for this Month - <span id="section"></span></b></td></tr>
<tr>
<td style="padding:20px;">
<p>Court: <select id="newReportsDD">
<option>Criminal</option>
<option>Civil</option>
<option>Family</option>
<option>Business</option>
</select></p>
<p><?php echo judgesDropDown('newReportsJudgeDD'); ?></p><br/>
<p><button id = "createReport">Create/Edit Report</button></p>
</div></td>
<td style="padding:10px;"><div id ="judgesCompleted"><!-- AJAX GENERATED LIST --></div>
</td></tr>
</table>
最佳答案
<td id="container" style="padding:20px;">
<p>Court: <select id="newReportsDD">
<option>Criminal</option>
<option>Civil</option>
<option>Family</option>
<option>Business</option>
</select></p>
<p><?php echo judgesDropDown('newReportsJudgeDD'); ?></p><br/>
<p><button id = "createReport">Create/Edit Report</button></p>
</div></td>
#container {垂直对齐:顶部； 文本对齐:左对齐；
关于JQuery UI 按钮在鼠标悬停时四处移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7649209/