1

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

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

ul 上方显示的表格，我希望两个元素彼此相邻显示在一行中。我尝试使用：

div
{
   display:inline;
}

或者 ：

div
{
   display:block;
}

但它没有用。任何机构都可以帮助我吗？

4

5 回答 5

5

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

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

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

会成功的。（您将需要边距，因为列表也可以使用边距来显示项目符号，如果您没有提供，项目符号最终会出现在表格内。）

见小提琴

如果表格更高，您还必须在之后清除浮动，否则后续内容也可能最终到表格的右侧：

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

查看更新的小提琴

于 2013-07-23T10:40:06.433 回答
1

浮动您的内容：

div
{
   float: left;
}
于 2013-07-23T10:38:35.313 回答
0

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

table, ul
{
   display:inline-block;
}

这是一个工作示例

于 2013-07-23T10:37:35.147 回答
0

你可以只使用table,ul{display: inline-block;} 演示

于 2013-07-23T10:41:08.050 回答
0

尝试这个

    <div>
    <table style="float: left;">
        <tr>
            <td width="100">
                hellow world
            </td>
        </tr>
    </table>   <ul>
        <li>hi world</li>
    </ul>
</div>
于 2013-07-23T10:51:24.927 回答