如何在 DIV 中为第二个标签添加下划线

Question

所以我正在为客户开发一个相当大的网站。所有信息都通过标签输入并遵循以下格式：

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

labelName 允许客户自定义标签实际显示的内容（Amount vs Amount($) 等）并且数据通过 AJAX 填充数据。

我想知道是否有办法将边框底部应用于第二个标签 (labelData)，即使没有数据。例如，如果我按原样对 labelData 应用边框，则标签只是内部文本的宽度，但我希望下划线填充 labelName 和 DIV 末尾之间的空间。像这样：

<div>LabelName: _______________labelData________________</div> 

因为这是响应式的，所以我不想对标签的宽度进行硬编码。

Answer 1

2 个选项：

1. 您可以使用 css 应用最小宽度

2. 您可以对标签应用恒定的左右内边距，然后标签下方会有下划线

一个这样的例子：

.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;
}

您需要为标签定义min-width 以使标签元素具有可见边框。