Share how to make vertical lines

Question

I have a list of contact information like this: Example

How to make a vertical line that separates email and hotline like in the picture, thank you very much

Answer 1

You can use the pipe character on your keyboard. It looks like this:

|

-or-

You can split the row into two elements and add a border on one of them. This is just an example:

HTML

<div class="left">电子邮件</div><div class="right">热线</div>

CSS

.left { display: inline-block; border-right: 1px solid black; padding: 0 10px; }
.right { display: inline-block; padding: 0 10px; }