Question

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

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

这是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为中心。您可以尝试左对齐它，或者在其旁边添加另一个较小宽度的引导列。见jsfiddle：

https://jsfiddle.net/rewxz6xu/

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

Answer 2

试试这个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;
}
.col-xs-2 {
  border-right: 1px solid red;
}

Answer 3

如果我理解正确，您可以像这样更改HTML（使用另一个类作为第二个元素）：

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

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

3 个答案: