Question

我有一个包含两个大单元格的表格，左边的单元格包含两个下拉列表和我遇到问题的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:&nbsp;<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>

Answer 1

 <td id="container" style="padding:20px;">
        <p>Court:&nbsp;<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 {vertical-align：top; text-align：left;}

鼠标悬停时JQuery UI按钮移动

1 个答案: