如何在Div中按下按钮

Question

我有按钮并在弹出窗口中选择下拉列表。但出于某种原因，我无法将按钮移动到下拉列表下方的位置。

我已经尝试将它们放在不同的表行中，但它没有帮助。

这是我的代码

$(".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 1

实际上你不需要使用表格，只需浮动它们并清除下一个按钮上的浮动对齐。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您错过了<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 3

您只是遗漏了<td>

中的<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 4

要扔一些！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;