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

【问题标题】：Some problems to show 4 <li> elements in two columns在两列中显示 4 个 <li> 元素的一些问题
【发布时间】：2013-10-03 08:53:00
【问题描述】：

我发现使用 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？

Tnx

安德烈亚

【问题讨论】：

标签： html css xhtml css-float

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：