DIVで2番目のラベルに下線を付ける方法

Question

私はかなり大きなサイトを顧客として取り組んでいます。そして、すべての情報は、ラベル経由で入力し、このフォーマットに従っている：

<div class="col-xs-12 col-md-6" id="permissionsDIV"> 
    <label id="labelName"></label><label id="labelData"></label> 
</div> 

ラベル名は、顧客がラベルが実際に（など金額（$）対額）と言うと、データがデータで満たされているものをカスタマイズすることができますAJAX経由。

データがない場合でも、2番目のラベル（labelData）にborder-bottomを適用する方法があるのだろうかと思っていました。たとえば、labelDataに境界線をそのまま適用すると、ラベルは内部のテキストの幅にすぎませんが、labelNameとDIVの間のスペースを埋めるようにしたいと思います。同様に：

<div>LabelName: _______________labelData________________</div> 

これは、ラベルの幅をハードコーディングすることを控えたいからです。

Answer 1

2オプション：

1. あなたはCSS

2. を使用して最小の幅を適用することができますあなたはそれの下で

を下線を持っていると思われるラベルに一定の左右のパディングを適用することができます

このような例の1つ：

.permissionsDIV label:nth-child(2) { 
 
    min-width: 50px; 
 
    border-bottom: 1px solid grey; 
 
    display: inline-block; 
 
    padding: 0 15px; 
 
    
 
    margin-left: 10px; 
 
}

<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV"> 
 
    <label id="labelName">My Name</label><label id="labelData">Larry The Cool Guy</label> 
 
</div> 
 
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV2"> 
 
    <label id="labelName">My Name</label><label id="labelData"></label> 
 
</div>

Answer 2

あなたはCSSのnth-of-typeセレクタを使用することができます。

#permissionsDIV label:nth-of-type(2){ 
    border-bottom:1px solid black; 
} 

あなたはvisibileボーダーを持つようにlabel要素を取得するために、ラベルのmin-widthを定義する必要があります。