堆栈内存溢出
  简体   繁体   English

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

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

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

问题描述

I have two tables that I have placed in two divs which divide the screen vertically in two half's.我有两张桌子，它们放在两个 div 中，它们将屏幕垂直分成两半。 These tables have collapsible rows that can expand on click.这些表格具有可折叠的行，可以在单击时展开。

At the bottom of the tables, I have placed a submit button which is positioned relative in div1.在表格的底部，我放置了一个提交按钮，它在 div1 中相对定位。 So when the table in div1 expands, the button moves down as expected.因此，当 div1 中的表格展开时，按钮会按预期向下移动。 But when table in div2 expands, the button stays at it's position.但是当 div2 中的表格展开时，按钮保持在它的位置。

My question is, can I make this button relative to both the divs so it should move when any table, either from div1 or div2 expands.我的问题是，我可以让这个按钮相对于两个 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>

View on JSFiddle在 JSFiddle 上查看

3 个解决方案

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

In order to get the submit button to move down when either row is expanded you could move the submit outside of both divs as follows:为了让提交按钮在任一行展开时向下移动，您可以将提交移动到两个 div 之外，如下所示：

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

HTML: 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: 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

You can move your submit button at the bottom of your html code and add the clear property to reset the float.您可以移动 html 代码底部的提交按钮并添加 clear 属性以重置浮动。

Like this...像这样...

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

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

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

Updated your fiddle It looks like you just needed a wrapper div around the two tables then put the button outside of the wrapper div更新了您的小提琴看起来您只需要在两个表周围放置一个包装器 div，然后将按钮放在包装器 div 之外

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

This is the begging of your code to change这是乞求你的代码改变

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

This is the end of your code这是你的代码的结尾

</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 position relative to two other divs 相对于父级创建和定位div - Create and position divs relative to parent 如何使用头寸：相对DIV充当其他div的“分隔符”？ - How to use a position:relative DIV act as a 'spacer' for other divs? 如何在单击按钮时垂直放置 position div？ - How to position divs vertically on button click? 如何获取相对于HTML页面的标记位置 - How to obtain marker position relative to HTML page 两个 DIV 的同步位置 - Sync position of two DIVs 如何在jQuery中单击按钮时显示相对于按钮位置的div - How to show a div relative to the position of a button on click of that button in jQuery 向动态创建的div添加增量相对位置 - Adding incremental relative position to dynamically created divs 用一个按钮创建两个div - Creating two divs with a button 如何相对于按钮定位Angular Material面板对话框？ - How can I position an Angular Material panel dialog relative to a button?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM