以不同形式顯示Bootstrap按鈕和其他內嵌元素

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> 

這裏有一個jfiddle我有什麼https://jsfiddle.net/hs239zfo/

Answer 1

你的按鈕是不是在同一個「容器」元素......
沒有辦法到現在的位置是他們內聯不改變你的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