0

我发现使用 HTML 和 CSS 做以下事情有些困难。

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

如您所见，有一个标题为“为促进投资创建政策框架”的框，由#policyFrameworkBox div

在这个框中，我有一个无序列表，<li>里面有 4 个元素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的第二个旁边显示第一个，在第二行的第四个旁边显示第三个？lilili

肿瘤坏死因子

安德烈亚

4

2 回答 2

1

您在同一行看到它们的原因是宽度。50% + 4% 的填充，同一行没有足够的空间容纳 2。所以将宽度更改为 < 48%。

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

于 2013-10-03T09:01:14.040 回答
1

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

加上 2% 的 padding-left 和 2% 的 padding-right，总共是 50%，实际上是 54% ;)

于 2013-10-03T09:01:25.543 回答