文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML如何定位一个按钮相对于两个div？

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

Stack Overflow用户
提问于 2015-11-20 22:45:04
回答 3查看 74关注 0票数 2

我在两个div中放置了两个表，将屏幕垂直划分为两个半个。这些表有可折叠的行，可以在单击时展开。

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

我的问题是，我是否可以使这个按钮相对于两个div2，所以当任何表(无论是来自div1还是div2)展开时，它都应该移动。

​

代码语言：javascript
复制
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');
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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视图

jquery
html
css
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-11-20 22:59:30

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

像这样..。

代码语言：javascript
复制
        ...
        <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/

票数 1
EN

Stack Overflow用户

发布于 2015-11-20 22:58:19

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

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

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
.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;
}
票数 1
EN

Stack Overflow用户

发布于 2015-11-20 22:59:15

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

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

这是您的代码更改的乞求。

代码语言：javascript
复制
<body>
<form id="form1" method="post" class="admin-form">
<div id="wrapper">
<div style="float:left; width:50%">
<table id="t02" class="table2">

这是您的代码的结尾。

代码语言：javascript
复制
</table>
</div>
</div>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
</form>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33837303

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档