html - 内联列表中间部分下降？

Question

好的，所以我创建了一个 fiddle 以确保它不会与我页面上的其他样式发生冲突

My Fiddle

问题是我有一个内联列表，每个列表都有一个标题和下面的一些文本 - 中间的列表似乎下降了几个像素，但不确定为什么或从哪里来？我试过改变边距 - 我试过负边距来恢复它，但似乎没有任何效果......？

<h2 style="text-align:center; margin: 0 auto; color: #CCC; font-size: 35px;">WHAT WE DO</h2>


<div style="width: 900px; margin: 0 auto;">


<ul style="width: 100%; margin: 0; padding: 0 0 0 0;">

    <li style="width: 290px; display: inline-block;"><h3 style="color: #CCC;">OUR TEAM</h3>
            <p style="color: #000; font-size: 17px; line-height: 27px; font-weight: 300;">Our team builds mobile, tablet and web-based applications designed to streamline processes, increasing profitability and employee engagement. Our primary goal is to change the way our clients work for the better.</p></li>

    <li style="width: 290px; display: inline-block;"><h3 style="color: #CCC;">CLIENT EXPERIENCE</h3>
            <p style="color: #000; font-size: 17px; line-height: 27px; font-weight: 300;">We aim to provide the best experience possible. Our clients remain informed and involved at every step of a project, up to delivery and beyond. We take pride in our service.</p></li>

    <li style="width: 290px; display: inline-block; "><h3 style="color: #CCC;">BETTER BY DESIGN</h3>
            <p style="color: #000; font-size: 17px; line-height: 27px; font-weight: 300;">Design and creative thinking are key parts of the service we offer. We take great care in how our software looks and operates, challenging every aspect from the perspective of both the business and its users.</p></li>


</ul>

Answer 1

将 vertical-align:top; 添加到下拉的第二个 li 的内联 css 中。或者最好为所有这样的列表项提供这种样式

ul li{
    vertical-align:top;
}