堆栈内存溢出
  繁体   English   中英

HTML 如何相对于两个 div 定位按钮？

[英]HTML How to position a button relative to two divs?

 原文  2015-11-20 22:45:04  2   3    javascript/ jquery/ html/ css

问题描述

我有两张桌子，它们放在两个 div 中，它们将屏幕垂直分成两半。 这些表格具有可折叠的行，可以在单击时展开。

在表格的底部，我放置了一个提交按钮，它在 div1 中相对定位。 因此，当 div1 中的表格展开时，按钮会按预期向下移动。 但是当 div2 中的表格展开时，按钮保持在它的位置。

我的问题是，我可以让这个按钮相对于两个 div，所以它应该在任何表格（来自 div1 或 div2）扩展时移动。 

 addPlusSign(); $(".btn1").click(function() { $(".expand1").toggle(); var btn1Text = $(".btn1").text(); if (btn1Text.indexOf("+") > -1) { var temp = btn1Text.replace(/\\+|\\-/ig, '-'); $(".btn1").text(temp); } else if (btn1Text.indexOf("-") > -1) { var temp = btn1Text.replace(/\\+|\\-/ig, '+'); $(".btn1").text(temp); } }); $(".btn2").click(function() { $(".expand2").toggle(); var btn1Text = $(".btn2").text(); if (btn2Text.indexOf("+") > -1) { var temp = btn2Text.replace(/\\+|\\-/ig, '-'); $(".btn2").text(temp); } else if (btn2Text.indexOf("-") > -1) { var temp = btn2Text.replace(/\\+|\\-/ig, '+'); $(".btn2").text(temp); } }); }) function addPlusSign() { if ($(".expand1")) { var btn1Text = $(".btn1").text(); $(".btn1").text(btn1Text + " [+]"); } if ($(".expand2")) { var btn2Text = $(".btn2").text(); $(".btn2").text(btn1Text + " [+]"); } } $(function() { $('.admin-form') //we need to save values from all inputs with class 'admin-input' .find(':input.admin-input') .each(function() { //save old value in each input's data cache $(this).data('oldValue', $(this).val()) }) .end() .submit(function(ev) { var changed = false; $(':input.admin-input', this).filter(function() { if ($(this).val() != $(this).data('oldValue')) { changed = true; } }); if ($(this).hasClass('changed') && (!changed)) { alert("None of the thresholds were changed!"); ev.preventDefault() } if ($(this).hasClass('changed') && changed) { var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?") if (!allowSubmit) ev.preventDefault() } }); }); $(document).on('input', '.admin-input', function() { $(this).closest('form').addClass('changed'); });
 .expand1 { display: none; } .btn1 { cursor: pointer; } .expand2 { display: none; } .btn2 { cursor: pointer; } body { background-color: rgb(255, 255, 255); font: 15px Verdana, Helvetica, sans-serif; } table#t02, #t02 th, #t02 td { border: none; border-collapse: collapse; font-size: 90%; font-weight: normal; } table#t03, #t03 th, #t03 td { border: none; border-collapse: collapse; font-size: 90%; font-weight: normal; } #button1 { position: relative; top: 20px; left: 85%; color: white; background-color: rgb(0, 89, 132); font-weight: bold; } html { overflow-y: scroll; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form1" method="post" class="admin-form"> <div style="float:left; width:50%"> <table id="t02" class="table2"> <tr> <th style="padding:0 30px 0 0;"></th> <th></th> <th style="padding:0 10px 0 0;">Green</th> <th colspan="3" style="padding:0 10px 0 0">Yellow</th> <th></th> <th style="padding:0 10px 0 0">Red</th> </tr> <tr> <td class="btn1" style="padding:0 30px 0 0;"><b>Collapsible Row1</b> </td> <td>&lt</td> <td style="padding:0 10px 0 0"> <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3"> </td> <td> <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3"> </td> <td>to</td> <td style="padding:0 10px 0 0"> <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3"> </td> <td>&gt</td> <td style="padding:0 10px 0 0"> <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row1</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row2</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row3</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row4</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row5</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row6</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row7</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row8</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row9</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Hidden Row10</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3"> </td> </tr> </table> <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px" /> </div> <div style="float:left; width:50%"> <table id="t03" class="table3"> <tr> <th style="padding:0 30px 0 0;"></th> <th></th> <th style="padding:0 10px 0 0;">Green</th> <th colspan="3" style="padding:0 10px 0 0">Yellow</th> <th></th> <th style="padding:0 10px 0 0">Red</th> </tr> <tr> <td class="btn2" style="padding:0 30px 0 0;"><b>Collapsible Row1</b> </td> <td>&lt</td> <td style="padding:0 10px 0 0"> <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3"> </td> <td> <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3"> </td> <td>to</td> <td style="padding:0 10px 0 0"> <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3"> </td> <td>&gt</td> <td style="padding:0 10px 0 0"> <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row1</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row2</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row3</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row4</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row5</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row6</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row7</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row8</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row9</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Hidden Row10</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3"> </td> </tr> </table> </div> </form>

在 JSFiddle 上查看

3 个解决方案

解决方案1
 1  2015-11-20 22:58:19

为了让提交按钮在任一行展开时向下移动，您可以将提交移动到两个 div 之外，如下所示：

https://jsfiddle.net/naL11ram/2/

HTML：

<body>
    <form id="form1" method="post" class="admin-form">
        <div style="float:left; width:50%">
            <table id="t02" class="table2">
                <tr>
                    <th style="padding:0 30px 0 0;"></th>
                    <th></th>
                    <th style="padding:0 10px 0 0;">Green</th>
                    <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
                    <th></th>
                    <th style="padding:0 10px 0 0">Red</th>
                </tr>
                <tr>
                    <td class="btn1" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
                    </td>
                    <td>&lt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>to</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td>&gt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row1</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row2</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row3</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row4</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row5</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row6</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row7</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row8</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row9</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row10</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
            </table>
        </div>
        <div style="float:left; width:50%">
            <table id="t03" class="table3">
                <tr>
                    <th style="padding:0 30px 0 0;"></th>
                    <th></th>
                    <th style="padding:0 10px 0 0;">Green</th>
                    <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
                    <th></th>
                    <th style="padding:0 10px 0 0">Red</th>
                </tr>
                <tr>
                    <td class="btn2" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
                    </td>
                    <td>&lt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>to</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td>&gt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row1</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row2</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row3</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row4</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row5</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row6</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row7</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row8</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row9</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row10</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
            </table>
        </div>
        <div style="clear:both"></div>
        <div class="button">
            <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px" />
        </div>
    </form>
</body>

CSS：

.expand1 {
    display: none;
}
.btn1 {
    cursor: pointer;
}
.expand2 {
    display: none;
}
.btn2 {
    cursor: pointer;
}
body {
    background-color: rgb(255, 255, 255);
    font: 15px Verdana, Helvetica, sans-serif;
}
table#t02, #t02 th, #t02 td {
    border: none;
    border-collapse: collapse;
    font-size:90%;
    font-weight:normal;
}
table#t03, #t03 th, #t03 td {
    border: none;
    border-collapse: collapse;
    font-size:90%;
    font-weight:normal;
}
.button {
    text-align:center;
}
#button1 {
    margin-top:20px;
    color: white;
    background-color: rgb(0, 89, 132);
    font-weight: bold;
}
html {
    overflow-y: scroll;
}

解决方案2
 1 已采纳  2015-11-20 22:59:30

您可以移动 html 代码底部的提交按钮并添加 clear 属性以重置浮动。

像这样...

        ...
        <div style="width:100%;clear:both">
            <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
        </div>
    </form>
</body>

在这里小提琴： https : //jsfiddle.net/naL11ram/4/

解决方案3
 0  2015-11-20 22:59:15

更新了您的小提琴看起来您只需要在两个表周围放置一个包装器 div，然后将按钮放在包装器 div 之外

https://jsfiddle.net/naL11ram/1/

这是乞求你的代码改变

<body>
<form id="form1" method="post" class="admin-form">
<div id="wrapper">
<div style="float:left; width:50%">
<table id="t02" class="table2">

这是你的代码的结尾

</table>
</div>
</div>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
</form>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 div 相对于其他两个 div 的位置 相对于父级创建和定位div 如何使用头寸：相对DIV充当其他div的“分隔符”？ 如何在单击按钮时垂直放置 position div？ 如何获取相对于HTML页面的标记位置 两个 DIV 的同步位置 如何在jQuery中单击按钮时显示相对于按钮位置的div 向动态创建的div添加增量相对位置 用一个按钮创建两个div 如何相对于按钮定位Angular Material面板对话框？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM