我读了一个不应该使用表格作为布局的手段，但这样做所有的CSS样式，所以我想我能想到的模拟表中，通过使用CSS多栏布局的最基本的东西。
我创建了一个CodePen来说明问题。正如你可以看到，两列的内容开始在不同的高度，我不明白为什么。
.skill-explanation {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
column-count: 2;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒
</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis
</p>
</div>
</div>我想给一个更新这个帖子上，以防有人绊倒它。 1）显着的答案是矿上的改良效果，但我仍然觉得不够直观，因为它使用默认的柔性流动，这使主轴线的水平。 这应该是从逻辑的角度来看，方法是列寿。
因此，这里是一个更新的解决方案，这是最简单和直观的（至少在我看来）：
.center-wrapper {
margin: 0 auto;
display:table;
}
.skill-explanation {
list-style: none;
}
.rating {
}
.skill {
}
.skill-item {
list-style: none;
}<div class="center-wrapper" <ul class="skill-explanation">
<li class="skill-item">
<span class="rating">★☆☆☆ ‒</span>
<span class="skill">I can put it into context and am able to use it's basics</span>
</li>
<li class="skill-item">
<span class="rating">★★☆☆ ‒</span>
<span class="skill"></span>
intermediate knowledge, used several times
</li>
<li class="skill-item">
<span class="rating"> ★★★☆ ‒</span>
<span class="skill"></span>
good undestanding, used frequently
</li>
<li class="skill-item">
<span class="rating">★★★★ ‒</span>
<span class="skill"></span>
deep understanding, used on a daily basis
</li>
</ul>
</div>你的问题是利润率崩于p元素，因为他们如果div的是垂直堆叠。 See Johannes answer。
Howevwer，你的概念是有缺陷的。你可能想实际上评级技能关联
ul.skill-explanation {
list-style: none;
padding-left: 0;
}
.skill-item {
display: flex;
}
.skill-item > div {
width:50%;
}
.rating {padding-right: 0.5em;
text-align:right;
}<ul class="skill-explanation">
<li class="skill-item">
<div class="rating">★☆☆☆ ‒</div>
<div class="skill">I can put it into context and am able to use it's basics</div>
</li>
<li class="skill-item">
<div class="rating">★★☆☆ ‒</div>
<div class="skill">intermediate knowledge, used several times</div>
</li>
<li class="skill-item">
<div class="rating">★★★☆ ‒</div>
<div class="skill">good undestanding, used frequently</div>
</li>
<li class="skill-item">
<div class="rating"> ★★★★ ‒</div>
<div class="skill">deep understanding, used on a daily basis</div>
</li>
</ul>您可以添加padding: 1px 0到两个容器.align-left和.align-right。这样默认的顶部和p标签的底部边缘留在他们货柜内，不会造成任何的垂直偏移是由于您的codepen崩溃边缘等。
编辑如果你想使用你已经拥有的代码。从设置为浏览器中的一段“P”标签中取出保证金。然后设置行高到你想要的高度。 原来的答案 你会想，如果你想轻松行，你的项目为使用类似Flexbox的。您可能还需要设置行高度，这样就可以正确确保您的unicode的图标和文本行 这将让你有过在文字和图标排列完全控制。 More info on flexbox at W3schools
p{
margin: 0;
line-height: 1.5em;
}
Flex的盒子例如：
.skill-explanation {
display: flex;
align-items: center;
}
.align-left, .align-right {
line-height: 1.5rem;
}
.skill-explanation {
display: flex;
align-items: center;
}
.align-left, .align-right {
line-height: 1.5em;
}<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis</p>
</div>
</div>但是，你可能会关闭重新审视你的HTML代码，别人建议，使之成为一个更好的列表，因为这将是更语义正确，更容易维护
<ul>
<li>★☆☆☆ ‒ I can put it into context and am able to use it's basics</li>
<li>★★☆☆ ‒ intermediate knowledge, used several times</li>
<li>★★★☆ ‒ good undestanding, used frequently</li>
<li>★★★★ ‒ deep understanding, used on a daily basis</li>
</ul>