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

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%;
}

在实践中，我尝试 float li元素彼此相邻，我将宽度设置为 50%，所以两个 li元素占据了整个空间，所以去看看其他两个 li第二行的元素。

但是不工作并且li元素仍然显示在列中

为什么？我需要做什么才能显示第一个 li在第二个旁边li在第一行和第三行 li在第四个旁边li在第二行？

谢谢

安德里亚

Answer 1

尝试给它一个 46% 的宽度。

padding-left 的 2% 和 padding-right 的 2% 合起来是 50%，实际是 54% ;)