Question

我在这个问题上挣扎了几个小时，但仍然无法让它继续工作。

我有这样的HTML代码：

 <ul>
    <li><div>aa</div><div>aa11</div><li>
    <li><div>bb</div><div>bb11</div><li>
 </ul>

我想知道如何使用css让<div>显示在一行中。但<ul><li>标签仍然具有垂直样式。

我是CSS新手，任何帮助都会感激不尽。

Answer 1

ul li{
display: table;
}

ul li div{
float: left;
}

这会使<div>内的<li>并排显示。

Answer 2

您可能还想添加

list-style-type: none;

为了摆脱子弹点。除了@Viswalinga Surya S所说的

这样做，会给你这个 - ＆gt; http://jsfiddle.net/A35Fe/

Answer 3

您似乎忘记关闭<li>代码，但是您已打开<li>代码，但未使用</li>关闭它们。如果您想并排aa和aa11，还需要为display: inline-block;添加div样式。这是一个演示：http://jsfiddle.net/5wLku/

这是我的解决方案：

<ul>
    <li><div>aa</div><div>aa11</div></li>
    <li><div>bb</div><div>bb11</div></li>
 </ul>

Answer 4

我已更新您的代码，这是JSFiddle链接，如果您想要进行更多更改，请告诉我们：

HTML：

<ul>
    <li><div>aa</div><div>aaa1</div></li>
    <li><div>bb</div><div>bbb1</div></li>
</ul>

CSS：

ul li{
float: left;
}

Answer 5

<li style="float:left"><div>aa</div><div>aa11</div></li>

并结束您的列表项 </li>不在<li>