css中2个字段之间的垂直线答案

【问题标题】：Vertical line between 2 field in csscss中2个字段之间的垂直线
【发布时间】：2013-12-09 02:21:39
【问题描述】：

我想用一条长垂直线分隔 2 个字段。

link1 | abc
link2 | abc

我该怎么做？

【问题讨论】：

@user3027246，添加解决方案。

标签： html css

【解决方案1】：

您可以尝试将链接包装在一个 div 中，将 abcs 包装在另一个 div 中，这会将两个字段分开。然后使用分隔线并设置自己的边距以适合两个 div 之间：

<div class='left'>
   <p>link1</p>
   <p>link2</p>
</div>

<div class='right'>
   <p>abc1</p>
   <p>abc2</p>
</div>

.divider{
    position:absolute;
    left:#%;
    top:#%;
    bottom:#%;
    border-left:1px solid black;
}

【讨论】：

【解决方案2】：

更新

将您的字段分成两个div。然后添加一个right border to left div OR left boarder to right div

为了声明我的解释，我写了一个示例代码：

HTML

<div class='left'>
   <p>link1</p>
   <p>link2</p>
</div>
<div class='right'>
   <p>abs</p>
   <p>akdas</p>
</div>

CSS：

.left{
   display: inline-block;
   border-right: 1px #F05940 solid;
}
.right{
   display: inline-block;   
}

您可以将您的一般 div 分为 3 部分（任何部分都是 div）

链接的第一个 div
第二个是垂直线的图像
第三个是 abc！

或者您可以使用语义用户界面轻松做到这一点看到这个链接 http://semantic-ui.com/elements/divider.html

【讨论】：

【解决方案3】：

所以你希望链接 1 和链接 2 在一侧，而 abc abc 在另一侧，用一条垂直线分隔？

您可以将两个链接包装在一个 div 中并给它一个

 border-left:1px solid black;

或者您可以使用表格并为 td 单元格添加边框。

或者你可以使用一个空的 div（有一些边框），宽度为零，自动高度，并将其放在两者之间以分隔它们。

（就我个人而言，我会选择第一个）

更新：FIDDLE

【讨论】：

我试过了，但是在右边，像“abc”这样的内容在另一行。我希望 link1 和内容“abc”在同一行
检查我添加的小提琴。是这个意思吗？

【解决方案4】：

我不确定你真正想要做什么，但你可以用“abc”div 上的边框做类似的事情

border-left: 1px solid black;

example

【讨论】：