位移和

Question

这个应该非常容易解决。我有以下代码不能按照我希望的方式工作。目的是得到这样的东西，“1 2 3 4桌子”右边的按钮：

1    2       BUTTON
3    4

但我得到的几乎与按钮作为第3行相同。我错过了什么？

<tr>
    <td>
        <tr>
            <td>1 </td>
            <td>2 </td>
        </tr>
        <tr>
            <td>3 </td>
            <td>4 </td>
        </tr>
    </td>
    <td>
        <div class="but">
            <input type="button" class="button" value="BUTTON" />
        </div>
    </td>
</tr>

Answer 1

您应该将按钮移动到第一个表格行。您的HTML无效 - 您无法将<tr>放入<td>，反之亦然。来自the specification：

  

Contexts in which this element can be used：
  作为thead元素的孩子。
  作为tbody元素的孩子。   作为tfoot元素的孩子。   作为table元素的子元素，在任何caption，colgroup和thead元素之后，但仅当没有tbody个元素属于table元素。

查看我的代码段：

td {
  padding: 5px 20px;
}

<table>
    <tr>
        <td>1 </td>
        <td>2 </td>
        <td>
            <div class="but">
                <input type="button" class="button" value="BUTTON" />
            </div>
        </td>
    </tr>
    <tr>
        <td>3 </td>
        <td>4 </td>
        <td></td>
    </tr>
</table>

Answer 2

如果你想拥有一个内部表，它需要自己的一组<table>标签：

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>1 </td>
                    <td>2 </td>
                </tr>
                <tr>
                    <td>3 </td>
                    <td>4 </td>
                </tr>
            </table>
        </td>
        <td>
            <div class="but">
                <input type="button" class="button" value="BUTTON" />
            </div>
        </td>
    </tr>
</table>

否则，您的“内部”tr实际上被视为外部表中的第二行和第三行，从而导致置换。在包含数字的行之后，包含该按钮的td会出现在新行中。结果是一个缺少<tr>开始标记和一些意外<td> / </td>标记的表格。这是您的原始标记重新缩进和“固定”（包括外部<table> / </table>标记，无论出于何种原因未在问题中显示），以向您展示我的意思：

<table>
    <tr>
        <td>
    <tr>
        <td>1 </td>
        <td>2 </td>
    </tr>
    <tr>
        <td>3 </td>
        <td>4 </td>
    </tr>
    <tr>
        <td>
            <div class="but">
                <input type="button" class="button" value="BUTTON" />
            </div>
        </td>
    </tr>
</table>

请注意，<tr>和<td>具有可选的结束标记，这意味着即使第一个tr和td缺少其结束标记，上面的标记也完全有效，这就是为什么你的原始标记按原样处理的原因。

Answer 3

您已将eveything包含在一个<tr>标记内。您需要2个单独的<tr>标记，即2行，按钮应位于<table>标记之外。

然后使用 CSS ，您需要将表格和按钮的display设置为inline-block，然后使用 CSS的position属性，您可以将按钮定位到所需位置。

由于您还希望表格的两列之间有一些空格，您可以使用 在表格的两列之间添加一些空格。

要在表格和按钮之间添加一些空格，请在按钮的左侧中添加一些padding

＆＃13;

＆＃13;

.but{
  display: inline-block;
  position: relative;
  top: -30px;
  padding-left: 40px;
}

table{
  display: inline-block;
}

＆＃13;

<table>
<tr>
<td>1</td>
  <td>&emsp;&emsp;</td>
<td>2</td>
 </tr>

 <tr>
   <td>3</td>
   <td>&emsp;&emsp;</td>
<td>4</td>
</tr>
</table>

<div class="but">
        <input type="button" class="button" value="BUTTON" />
</div>

＆＃13;

＆＃13;

＆＃13;