私は 2 つの HTML サンプルを持っています。
1)
<div class="person">
<div class="info">
<div class="name">Isabelle of_Bavaria</div>
</div>
</div>
2)
<div class="person">
<div class="info">
<div class="name">King of France Charles_V the_Wise</div>
<div class="title"><label>Title:</label>King of France</div>
<div class="date"><label>Birth:</label>Jan 21st, 1337</div>
<div class="date"><label>Death:</label>Sep 16th, 1380</div>
</div>
</div>
この CSS を使用して、名前の下に行を追加し、人の div の周りにボックスを追加しています。
.person .name
{
position: relative;
text-align: center;
border-bottom: 1px dotted black;
}
.person
{
position: relative;
width: 250px;
height: auto;
border: 1px solid black;
margin-top: 5px;
padding: 5px;
}
追加のクラスや div を必要とせずにサンプル 2 に名前を残しながら、サンプル 1 で名前に境界線がないようにするために css でできることはありますか?