如何使用p标签内联表

Question

我被困在一个我需要与p tag内联的表格的地方，但我无法这样做。我想在我的HTML风格中进行极简主义的改变。以下是我的尝试

<p>ABCD</p>
<table style = display: inline;>
   <tbody>
      <tr>
         <td>State&nbsp;</td>
         <td>Capital&nbsp;</td>
         <td>Zip&nbsp;</td>
      </tr>
      <tr>
         <td>New Yrk&nbsp;</td>
         <td>Alba ny&nbsp;</td>
         <td>13210&nbsp;</td>
      </tr>
   </tbody>
</table>

链接：https://jsfiddle.net/h5bbs0oy/

Answer 1

你有几个问题：

1. 如果您没有在引号内包含空格，则属性中不能包含空格。
2. 您还需要将<p>内联。

<强>解决方案

<p style="display: inline;">ABCD</p>
<table style="display: inline;">

<强>段

＆＃13;
＆＃13;
<p style="display: inline;">ABCD</p>
<table style="display: inline;">
  <tbody>
    <tr>
      <td>State&nbsp;</td>
      <td>Capital&nbsp;</td>
      <td>Zip&nbsp;</td>
    </tr>
    <tr>
      <td>New Yrk&nbsp;</td>
      <td>Alba ny&nbsp;</td>
      <td>13210&nbsp;</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

预览

Answer 2

如果您要将段落和表格同时内联，请在两个代码上都显示 显示：内联 。

<p style="display: inline">ABCD</p>
<table style="display: inline">...

Answer 3

同时显示：内联工作，但如果你只使p tag 浮动，那么它会很好。无需添加显示：内联任何一个，同时添加display：inline，您将无法添加顶部和底部填充或边距。

Answer 4

如果要使用内联CSS方法创建表内联，请按照以下方法操作：

＆＃13;

＆＃13;

<table style="display: inline">
  <tbody>
    <tr>
      <td>State&nbsp;</td>
      <td>Capital&nbsp;</td>
      <td>Zip&nbsp;</td>
    </tr>
    <tr>
      <td>New Yrk&nbsp;</td>
      <td>Alba ny&nbsp;</td>
      <td>13210&nbsp;</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

内联css中的引号丢失