Question

我想用长垂直线分开2个场。

link1 | abc
link2 | abc

我该怎么做？

Answer 1

所以你想要一边是链接1 link2，另一边是abc abc，用垂直线分开？

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

 border-left:1px solid black;

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

或者你可以使用零宽度（带有一些边框），零宽度和自动高度，并将它放在两者之间以将它们分开。

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

更新：FIDDLE

Answer 2

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

border-left: 1px solid black;

example

Answer 3

<强>更新

将您的字段分成两个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！

或者你可以使用semantic-ui轻松完成看到这个链接 http://semantic-ui.com/elements/divider.html

Answer 4

您可以尝试将链接包装在一个div中，并在另一个div中包含abcs，这将分隔两个字段。然后使用分隔符并设置自己的边距以适应两个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;
}

css中2场之间的垂直线

4 个答案: