Divにボタンを移動する方法

Question

ボタンがあり、ポップアップでドロップダウンを選択しています。何らかの理由でボタンをドロップダウンの下に移動することはできません。

私はそれらを別のテーブル行に配置しようとしましたが、それは役に立たなかった。

は、ここであなたは、単にが欠落している<td></td>

$(".form").button(); 
 
$("#popup").dialog({ 
 
    title: "Test", 
 
    modal: true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="popup" style="overflow:scroll;"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
      <select style="width:100px;"> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
      <option>4</option> 
 
      <option>5</option> 
 
      <option>6</option> 
 
      <option>7</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <input type="button" class="form" value="Save"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

私のコードです<tr>

$(".form").button(); 
 
$("#popup").dialog({ 
 
    title: "Test", 
 
    modal: true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="popup" style="overflow:scroll;"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <select style="width:100px;"> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
      <option>4</option> 
 
      <option>5</option> 
 
      <option>6</option> 
 
      <option>7</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="button" class="form" value="Save"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

を逃した

$(".form").button(); 
 
$("#popup").dialog({ 
 
    title: "Test", 
 
    modal: true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="popup" style="overflow:scroll;"> 
 
    <table> 
 
    <tr> 
 
     <select style="width:100px;"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
     <option>6</option> 
 
     <option>7</option> 
 
     </select> 
 
    </tr> 
 
    <tr> 
 
     <input type="button" class="form" value="Save"> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 3

ゴッタ内タグがそこにいくつかを投げます！

$(".form").button(); 
 
$("#popup").dialog({ 
 
    title: "Test", 
 
    modal: true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="popup" style="overflow:scroll;"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <select style="width:100px;"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
     <option>6</option> 
 
     <option>7</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="button" class="form" value="Save"> 
 
    </tr> 
 
    </td> 
 
    </table> 
 
</div>

Answer 4

あなたがちょうどそれらを浮遊し、ボタンを以下にフロートの位置合わせをクリアテーブルを使用するための必要は実際にはありません。

$(".form").button(); 
 
$("#popup").dialog({ 
 
    title: "Test", 
 
    modal: true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="popup" style="overflow:scroll;"> 
 
     <select style="width:100px; float:left;"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
     <option>6</option> 
 
     <option>7</option> 
 
     </select> 
 
     <input type="button" class="form" value="Save" style="float:left; clear:both;"> 
 
</div>