Question

我必须在现有的<td>中插入一个复选框和一个字段。但是，这些字段目前未显示在一行中。请在下面找到html：

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

</body>
</html>

输出如下内容：

Jill Smith

Timer Please check the box

[]

这里＆＃34;定时器＆＃34;并且复选框不在同一行（在同一<td>内）。

有人可以帮帮我吗？

PS：我无法更改已有的表格格式。

p内定时器的原因：定时器是一个动态字段，其计数从20开始到0。所以我必须在JavaScript中使用元素ID，我在这里没有提及。

Answer 1

会强制换行，因此复选框位于下一行。试试Timer

<label><input type="checkbox" name="checkbox" value="value">Text</label>

将是最佳选择，因为现在您还可以单击复选框的名称，以选中复选框。

Answer 2

＆＃13;

td p,td input{float:left}

＆＃13;

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

＆＃13;

td p,td input{display:inline}

＆＃13;

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

＆＃13;

td p,td input{display:inline-block}

＆＃13;

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<p/>
      <input type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

＆＃13;

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p>Timer<input type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
      
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

＆＃13;

更新（评论请求）

＆＃13;

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p style="float:left">Timer<p/>
      <input  style="float:left" type="checkbox" id="checkBox" name="checkBox" size="30"/>
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

＆＃13;

添加课程

＆＃13;

.inline{
    display:inline
}

＆＃13;

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      

  </tr>
  <tr>
    <td>
      <p class=inline>Timer<input  class=inline type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
      
   </td>
    <td>
      Please check the box
    <td>
  </tr>
</table>

＆＃13;

Answer 3

将每个项目包裹在不同的单元格中，在这种情况下它会帮助你。

<tr>
    <td>
        Timer
    </td>
    <td>
        <input type="checkbox" id="checkBox" name="checkBox"/>
    </td>
    <td>
       Please check the box
    </td>
</tr>

或者，如果您需要在同一单元格中使用复选框和标签

<tr>
    <td>
        Timer
        <input type="checkbox" id="checkBox" name="checkBox"/>
    </td>
    <td>
       Please check the box
    </td>
</tr>

甚至

<tr>
    <td colspan="2"> <!-- colspan is 2 because you have two cols in your table -->
        Timer
        <input type="checkbox" id="checkBox" name="checkBox"/>
       Please check the box
    </td>
</tr>

“P”是块元素，并根据结果创建新块和新行。

Answer 4

删除＆＃34;段落＆＃34;

＆LT; p为H.

元素，靠近文本＆＃34;定时器＆＃34;从上面的代码。 :)

Answer 5

P是块级元素。 DTD所说的是标签只能包含内联元素。

你可以用

覆盖这个

p{
display:inline-block!important;
}

如何在同一列中提供两个html元素？

5 个答案: