html - 减少html中垂直线和第二个字段之间的前导空间

Question

我需要一些帮助来解决 HTML 中的问题。

我在两个字段之间创建了垂直线，但垂直线和第二个字段之间有前导空间。如何根据使用 HTML 和 CSS 的文本减少这些空间和行高？

这是CSS代码

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  padding-bottom: 3px;
  border-right: 1px solid #000;

}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;

}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}

这是HTML代码

<div class="row vertical-divider rightdiv2">
   <div class="col-xs-2">To</div>
   <div class="col-xs-10">Username</div>
 </div>

输出是: Vertical line between 2 fields

Answer 1

尝试添加 line-height: 1;到父样式，像这样:

.row.vertical-divider {
  overflow: hidden;
  line-height: 1;
}

另外，为了将来引用，您尝试过的示例非常有帮助，让人们知道应该避免尝试什么!

编辑:

误解了你的问题，抱歉。

我认为问题在于您的文本以 col-xs-10 为中心。您可以尝试将其左对齐，或在其旁边添加另一个宽度较小的 Bootstrap 列。参见 jsfiddle:

https://jsfiddle.net/rewxz6xu/

使用填充，因为我必须创建空间，或者像我说的那样，添加一个新的 col-xs-?在用户名字段的右侧。