内联列表中段掉线?

时间:2014-03-26 10:32:33

标签: html css html-lists

好的,所以我创建了一个小提琴,以确保它与我页面上的其他样式没有冲突

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>

1 个答案:

答案 0 :(得分:0)

vertical-align:top;添加到正在下降的第二个li的内联css中。或者最好为所有列表项提供此样式,例如

ul li{
    vertical-align:top;
}