我试图为我的主页制作两列，但我无法正确对齐我的两列：http://prntscr.com/7fun6n
我将边框底部应用于我的li标签，但正如您在上图中看到的那样，这未正确对齐。
我的HTML代码：
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">uuuuu</h5>
<span id="feature-10-description" class="feature-description">ffffcan remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
</div>
我的CSS：
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features ul
{
float: left;
width: 45%;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
我想知道必须添加什么，以便所有内容都整齐排列。
答案 0 :(得分：2)
如果您想简化代码并且不需要为旧浏览器编写代码，可以尝试使用CSS3 Column属性。
尝试类似......
div {
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
}
答案 1 :(得分：1)
即使您为每个列表项指定了固定高度，也可以获取它们。缺点是一些列表项将包含一些文本和下面的大量空白区域。
#index-features li -> height: 160px;
答案 2 :(得分：0)
将此添加到#index-features ul
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
columns设置ul元素所包含的列数，在您的情况下为2。
这是#index-features li
display:inline;
line-height:1.5em;
显示设置为内联（有线）以及线高，因此它们具有相同的大小。
您也可以合并HTML。 （不需要创建2个ul元素）
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">uuuuu</h5>
<span id="feature-10-description" class="feature-description">ffffcan remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>