1

私はこのhtmlを持っています:

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
</div>

そして、次の CSS:

div#contentarea.profile_edit div {
    margin-bottom: 20px;
}
div#contentarea.profile_edit div.col_01 h3 {
    font-size: 2.4em;
    margin: 0;
}
div#workAllocated p {
    margin-bottom: 0px;
    border-bottom: 1px solid red;
}

結果は次のスナップショットのようになります。

ここに画像の説明を入力

しかし、次のようにする必要があります。

ここに画像の説明を入力

<p>異なるのは、タグ内のテキストの垂直方向の配置です。<p>コンテナ内では左上に配置されていますが、左中央に配置する必要があります。 line-height を変更し、表示を table-cell に変更してから、vertical-align プロパティを適用するなど、いくつかのトリックを試しまし たが、どれも実際には機能しません。

前もって感謝します！

4

3 に答える 3

6

p の高さを設定してから、行の高さをその高さに等しく設定します。

于 2013-05-08T14:13:08.137 に答える
1

これは私にとってはうまくいきます：http://codepen.io/anon/pen/LrEcx

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div#workAllocated p {
    margin: 0px;
    line-height: 1;
    border-bottom: 1px solid red;
    padding: 2px 0;
}

</style>

</head>
<body>

<div id="workAllocated">
    <h3>Work Allocated</h3>
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p> 
    <p>Lorem Ipsum</p>  
    <p>Lorem Ipsum</p>  
    <p>LOREM IPSUM</p>
</div>

</body>
</html>
于 2013-05-08T14:17:03.740 に答える
0

p に高さを追加して、行の高さを調整するだけです

フィドル.

//編集//おっと、他のアンサーを見ました

于 2013-05-08T14:14:49.247 に答える