Question

我发现使用HTML和CSS执行以下操作有些困难。

我有这个页面：http://www.onofri.org/example/example4/

正如您所见，#policyFrameworkBox div

创建了一个标题为“创建促进投资的政策框架”的方框

在此框中，我有一个无序列表，其中包含4个<li>个元素class="floattedList"

我想将这个li元素分为两列：

第一行中的第一个和第二个li元素以及第二行中的第三个和第四个li。

要做到这一点，我试图进行以下操作：

#policyFrameworkBox li{
    font-size: 11px;
    color: #004673;
    font-family: Verdana;
    font-weight: bold;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    width: 50%;
}

在实践中，我尝试将li元素浮动为彼此相邻，并将宽度设置为50％，因此两个li元素占据整个空间，所以去看看其他元素第二行中有两个li元素。

但是不起作用且li元素仍显示在列

中

为什么呢？我该怎么做才能显示第一行第二个li旁边的第一个li和第二行第四个li旁边的第三个li？< / p>

TNX

安德烈

Answer 1

您在同一行上看到它们的原因是宽度。 50％+ 4％填充，并且在同一条线上没有足够的空间容纳2。所以将宽度改为＆lt; 48％。

然而，这不是完整的解决方案，前两个项目将在同一行而不是您想要的同一行，为了解决这个问题，您可以重新排列标记，或者拆分为2个列表。

Answer 2

尝试给它46％的宽度。

左边填充2％，右边填充2％，总数为50％，实际为54％;）

在两列中显示4 <li>元素的一些问题</li>

2 个答案: