获取无序列表，如图所示

Question

我需要创建一个模仿下面图片模型的部分

因为我使用的是内容管理系统，所以我只能控制该部分中CSS个元素。因此，举例来说，我无法将ul划分为2个ul在单独的div中（不使用某些奇特的JavaScript黑客攻击）。

我需要使用的基本上是

<div class="outer">
   <div class="inner-left">
       <!-- left content injected here by the CMS -->
   </div>
   <div class="inner-right">
         <!-- list content injected below by the CMS -->
         <ul></ul> 
   </div>
</div>

离开你的头顶，你知道一种简单的方法来达到预期的行为吗？

Answer 1

你可以通过一堆浮动来实现这一点。

.inner-left {
    float: left;
    width: 33.33%; // the first column width
}
.inner-right{
    float: left;
    width: 66.66%; // the container of the next 2 columns
}

然后我们让ul创建接下来的2列，但首先需要通过删除边距和填充来重置ul，然后浮动li并给它们宽度为50％;

.inner-right ul {
    padding: 0;
    margin: 0;
}

.inner-right ul li {
    float: left;
    width: 50%;
}

这应该给你3个均匀间隔的列。

Answer 2

尝试使用此代码：

.inner-right ul li {
   display:inline-block;
   width:49%;
}