Question

我的div元素有问题，我无法在一行中显示它们：

<div>
 <table>
  <tr>
   <td>hellow world</td>
  </tr>
 </table>
 <ul>
  <li>hi world</li>
 </ul>
</div>

上面显示的ul表格，我希望两个元素彼此相邻显示。我试着用：

div
{
   display:inline;
}

或：

div
{
   display:block;
}

但它没有用。任何身体都可以帮助我吗??

Answer 1

如果您想并排显示table和ul，那么这些是您应该定位的两个元素，而不是它们碰巧所在的容器。

如果它们的高度相同，只需写

即可

table {float:left; margin-right:40px}

会做到这一点。（您将需要保证金，因为列表也可以使用边距来显示子弹，如果您没有提供，那么子弹将最终在表内。）

请参阅fiddle

如果表格较高，您还必须在之后清除浮动，否则后续内容也可能会在表格右侧结束：

div::after {content:''; display:block; clear:both}

请参阅updated fiddle

Answer 2

浮动你的内容：

div
{
   float: left;
}

Answer 3

您可以申请display:inline-block，但关键是要确保将其应用于正确的元素......

table, ul
{
   display:inline-block;
}

Here is a working example

Answer 4

您可以使用table,ul{display: inline-block;} demo

Answer 5

试试这个

    <div>
    <table style="float: left;">
        <tr>
            <td width="100">
                hellow world
            </td>
        </tr>
    </table>   <ul>
        <li>hi world</li>
    </ul>
</div>

如何在一行中显示div元素

5 个答案: