cssによるテキストタイトルの前方インデント効果
975 ワード
cssで実現されるテキストタイトルの前方インデント効果:実際の応用では、前にテキストのタイトルがあり、後ろにテキストが付いていて、前のタイトルに前方インデント効果があるレイアウトがある可能性があります.次に、コードの例を通じて、この機能を実現する方法を紹介します.コードは以下の通りです.
上のコードは私たちの要求を実現しました.次に、その実現原理を簡単に紹介します.まずdiv要素のpadding-leftを設定し、divの内容が左枠と一定の距離を持つようにし、strong要素の外距離を負の値に設定することで、左に移動することができ、この外距離の値はdivのpadding-left値と同じになり、私たちの要求を実現します.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=14625
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style type="text/css">
div{
padding-left:45px;
width:200px;
}
strong{
margin-left:-45px;
}
</style>
</span>
</head>
<body>
<div>
<strong> :</strong> ， ， 。
</div>
</body>
</html>上のコードは私たちの要求を実現しました.次に、その実現原理を簡単に紹介します.まずdiv要素のpadding-leftを設定し、divの内容が左枠と一定の距離を持つようにし、strong要素の外距離を負の値に設定することで、左に移動することができ、この外距離の値はdivのpadding-left値と同じになり、私たちの要求を実現します.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=14625
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/