不太确定如何描述我要实现的目标,所以我有一些屏幕截图。基本上,我想要 <h2>
所有的顶部边缘都对齐,<p>
也是如此。的。
我目前拥有的:
我想要的是:
index.html
<div id="services">
<p><span>Services</span></p>
<ul>
<li><h2>Identity and Logo Design</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
<li><h2>Branding</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
<li><h2>Web Design and Development</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
<li><h2>Social Media</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
</ul>
<div class="next">
<a href="#"><img src="img/next.png" alt="Click for more information" /></a>
</div><!-- end next -->
</div><!-- end services -->
样式.css
#services {
border-top: 1px solid #202020;
padding-bottom: 60px;
padding-top: 40px;
}
#services p span {
font-family: nevis-webfont;
font-size: 112.5%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
#services ul li {
display: inline-block;
padding-left: 100px;
width: 160px;
}
#services ul li:first-child {
padding-left: 0px;
}
#services ul li h2 {
padding-top: 20px;
text-align: center;
}
#services .next {
float: right
}
最佳答案
给<h2>
怎么样? s 一个高度,例如
#services ul li h2 {
height:2.5em;
}
编辑
如果您没有高度,则元素大小将取决于其内容,有些 header 的文本比其他 header 的文本多,迫使文本换行,这将具有与一个衬垫不同的高度。
段落的垂直位置将取决于标题的高度,因此如果所有标题的高度都相同,那么段落的垂直位置也将相同。
关于css - <li> 标题和描述在顶部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11076552/