1

私は 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 でできることはありますか?

4

2 に答える 2