Question

我正在尝试内联显示两个按钮（保存和删除），虽然这里有很多类似的问题，但这些解决方案都不适用于我。

我很怀疑这是因为我的表格中有很多内容我尝试使用style="float:left; width: auto"无济于事。

任何建议都非常感谢。感谢。

<form id="roadmapR" method="post" action="/roadmap/save.html" style="float:left; width: auto">
  <input type="hidden" class="roadmapData" name="roadmapData" value="">
  <table id="roadmapTable">
    <tr>
      <td>
        <p>126 Errors Found. <span id="rowErrors"></span> rows have errors.  &nbsp;&nbsp;&nbsp; Show Errors <input type="checkbox" id="showErrors" checked></p>
      </td>
    </tr>
    <tr>
      <td><div id="errors" class="hot handsontable htRowHeaders htColumnHeaders"style="height: 220px; overflow: hidden; width: 1400px;" data-originalstyle="height: 220px; overflow: hidden; width: 1000px;"></div></td>
    </tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr>
      <td align="left"><input type="text" id="search" placeholder="Search Roadmap for..." required> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Filter Roadmap to only show errors <input type="checkbox" id="showRoadmapErrors">
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <table id="filterTable">
            <tr>
              <td align="left">
                <table id="filterResetTable">
                  <tr>
                    <td>
                      <button id="resetBtn" type="button" class="btn btn-roadmap" >Reset</button>&nbsp;&nbsp;
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <button id="filterBtn" type="button" class="btn btn-roadmap" >Filter</button>&nbsp;&nbsp;
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <div class="form-filter">
                  <select name="filter1_category" id="filter1_category">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                  &nbsp;&nbsp;&nbsp;
                  <select multiple name="filter1_value" id="filter1_value">
                  </select>
                </div>
              </td>
              <td>
                <div class="form-filter">
                  <select name="filter2_category" id="filter2_category">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                  &nbsp;&nbsp;&nbsp;
                  <select multiple name="filter2_value" id="filter2_value">
                  </select>
                </div>
              </td>
              <td>
                <div class="form-filter">
                  <select name="filter3_category" id="filter3_category">
                    <option value="" disabled selected hidden>Select Your Filter...</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                  &nbsp;&nbsp;&nbsp;
                  <select multiple name="filter3_value" id="filter3_value">
                  </select>
                </div>
              </td>
            </tr>
            <tr><td>
              &nbsp;
              </td></tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <p>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Your Roadmap Information, 40 total rows; <span id="filterCount"></span> filter rows:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-roadmap  saveChanges" style="height:42px" disabled>Save</button>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p><span id="fatalErrorMessage" style="color:red;"></span>
      </td>
    </tr>
  </table>
</form>
<form id="roadmapD" method="post" action="/roadmap/delete.html" style="float:left; width: auto">
  <input type="hidden" class="deleteData" name="deleteData" value="">
  <table id="roadmapGridTable">
    <tr>
      <td>
        <button type="button" class="btn btn-roadmap deleteChanges"  style="height:42px" enabled>Delete</button>
      </td>
    </tr>
    <tr>
      <td><div id="tableTotals" class="hot handsontable htRowHeaders htColumnHeaders"style="height: 2000px; overflow: hidden; width: 3000px; " data-originalstyle="height: 220px; overflow: hidden; width: 900px; "></div><div id="dialog" title="Error Found"><p></p></div>
      </td>
    </tr>
  </table>
</form>

这是我所拥有的https://jsfiddle.net/hs239zfo/

的一个小问题

Answer 1

您的按钮不在同一容器中＃34;元素...
在不更改HTML标记的情况下，无法将它们内联在一起。

试试这个：

<tr>
  <td>
    <p>Your Roadmap Information, 40 total rows; <span id="filterCount"></span> filter rows:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-roadmap  saveChanges" style="height:42px" disabled>Save</button>
      <button type="button" class="btn btn-roadmap deleteChanges"  style="height:42px" enabled>Delete</button>
    </p>
  </td>
</tr>

此功能提交权限form：

$(".saveChanges").on("click",function(){
  alert("The form with id 'roadmapR' is submitting.");
  $("#roadmapR").submit();
});

$(".deleteChanges").on("click",function(){
  alert("The form with id 'roadmapD' is submitting.");
  $("#roadmapD").submit();
});

CodePen

显示不同形式的Bootstrap按钮和其他内联元素

1 个答案: