0

私が達成しようとしていることを説明する方法がよくわからないので、いくつかのスクリーンショットがあり<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
}
4

1 に答える 1

1

<h2>saの高さを与えるのはどうですか、例えば

#services ul li h2 {
    height:2.5em;
}

フィドル

編集

高さがない場合、要素のサイズはそのコンテンツによって異なります。一部のヘッダーには他のヘッダーよりも多くのテキストがあり、テキストを強制的に折り返すため、1つのライナーとは高さが異なります。

段落の垂直位置はヘッダーの高さに依存するため、すべてのヘッダーの高さが同じである場合、段落の垂直位置は同じになります。

于 2012-06-18T03:24:13.700 に答える