html - 如何使用 CSS 创建以两列分隔边距为中心的垂直分隔线？

Question

布局是两列，均为 47.5%，左列有 5% 的边距。我想在中间有一条垂直分界线。我目前正在使用border-right，但边框位于边距的左边缘，所以它是偏移的而不是居中的？

我正在使用 Wordpress Divi 主题，但以下 HTML/CSS 是我的问题的症结所在：

<style>
.col-left {float:left;width:47.5%;margin-right:5%;border-right:3px solid #fff;height500px}
.col-right {float:left;width:47.5%;height500px}
</style>

<div class="col-left"></div>
<div class="col-right"></div>

本

标签： htmlcss

Answer 1

更改 CSSmargin-right:2.5%; padding-right:2.5%;

.col-left {float:left;width:47.5%;margin-right:2.5%;padding-right:2.5%;border-right:3px solid #fff;height500px}