Question

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

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

labelName允许客户自定义标签实际所说的内容（金额与金额（$）等）。数据通过AJAX填充数据。

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

<div>LabelName: _______________labelData________________</div>

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

Answer 1

2个选项：

您可以使用css
您可以对标签应用常量左右填充，然后在其下面加下划线

一个这样的例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用css的nth-of-type选择器。

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

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

如何在DIV中强调第二个标签

2 个答案: