Html 如何在div之间画一条垂直线？

我想在我的div之间画一条垂直线。 我想让我的线条适合整个div的高度，但我做不到。 我试过下一个div的border right和border left

这是我的结果

边界权

下一个div的左侧边框

有人能告诉我实现这一目标的最佳方法吗

提前谢谢

---

密码

.小组{
边界半径：0px！重要；
背景色：#4D8FCB；
颜色：白色；
左边距：25px；
右边距：25px；
}
.小组标题{
高度：114px；
}
.小组委员会{
字体大小：10px；
背景色：白色；
}
.sa-h1{
颜色：白色；
字体大小：39px；
字体大小：粗体；
字体风格：普通；
字体系列：“adelle sans”，无衬线；
}
.sa-h2{
字号：28px；
}
.sa-h3{
字体大小：16px；
}
.sa-h4{
字体大小：14px；
}
.sa-h5{
字体大小：12px；
}
.sa-h6{
字体大小：10px；
}
.sa正确的项目{
浮动：左；
/*线高：114px*/
}
.sa答案、.sa分数、.sa审查、.sa报告{
垂直对齐：中间对齐；
显示：内联块；
填充：5px22px；
}



部分


2.2

练习

第2.2节练习

代数1

02/09/2015
11/25
项目回答正确

44%
得分


回顾


查看报告
目录

---

---

从

.col-xs-6 col-lg-6

中删除边框样式，然后：

.col-xs-1 sa-section {
    border-right: 2px solid #fff;
    margin-top: -11px;
    padding-top: 11px;
}

基本上，边框将显示在填充中，因此您只需将容器向上移动一点（使用负边距顶部），然后添加一些填充，使文本显示在相同的位置

您可能希望向容器添加一个ID，并以CSS的方式将其作为目标，而不是定义类的样式

---

从

.col-xs-6 col-lg-6

中删除边框样式，然后：

.col-xs-1 sa-section {
    border-right: 2px solid #fff;
    margin-top: -11px;
    padding-top: 11px;
}

基本上，边框将显示在填充中，因此您只需将容器向上移动一点（使用负边距顶部），然后添加一些填充，使文本显示在相同的位置

您可能希望向容器添加一个ID，并以CSS的方式将其作为目标，而不是定义类的样式

---

请检查小提琴-

border

删除了内联样式，并添加了以下样式

.sa-section:after{
  border-right: 2px solid white;
  content: "";
  display: block;
  width: 1px;
  position: absolute;
  bottom: -10px;
  top: -10px;
  right: 0;
}

---

请检查小提琴-

border

删除了内联样式，并添加了以下样式

.sa-section:after{
  border-right: 2px solid white;
  content: "";
  display: block;
  width: 1px;
  position: absolute;
  bottom: -10px;
  top: -10px;
  right: 0;
}

---

这些垂直线通常称为边框。@avrahamcool:你没看到我尝试使用边框吗？那些垂直线通常称为边框。@avrahamcool:你没看到我尝试使用边框吗？我可以问一下，你怎么知道

11

是神奇的数字？您如何处理这种错误？你用控制台了吗？在JSFIDLE中如何使用控制台？我刚刚进入控制台（在Chrome中，右键单击->Inspect Element），并使用margin top的值，直到看到边框碰到容器的边缘。因为你的容器有一个定义的高度（根据你的CSS），所以用这种方式使用像素计数是可以的。这绝对是正确的方法。边框应该像@wanovak那样设置在左div上。不在右边。请问，你怎么知道

11

是神奇的数字？您如何处理这种错误？你用控制台了吗？在JSFIDLE中如何使用控制台？我刚刚进入控制台（在Chrome中，右键单击->Inspect Element），并使用margin top的值，直到看到边框碰到容器的边缘。因为你的容器有一个定义的高度（根据你的CSS），所以用这种方式使用像素计数是可以的。这绝对是正确的方法。边框应该像@wanovak那样设置在左div上。不在右边。