CSS垂直等分線,是指在一個容器中垂直方向上等分的線條,通常用于排版和布局。以下是兩種實現的方法。
/* 方法一:使用偽元素 */ .container { display: flex; justify-content: space-between; position: relative; padding: 10px; } .container:after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #000; left: calc(50% - 0.5px); } .container:before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #000; left: calc(50% - 0.5px); }
上面的代碼使用了flexbox布局,并在容器中加入了偽元素,其中:before和:after在容器的正中間生成一條黑色垂直線。需要注意的是,由于偽元素的寬度是1px,所以實際上需要使用calc函數將left值設置為50%減去0.5px。
/* 方法二:使用border */ .container { display: flex; justify-content: space-between; border-right: 1px solid #000; padding: 10px; } .container:first-child { border-left: 1px solid #000; }
上面的代碼較為簡潔,使用了flexbox布局和border屬性。其中,容器的邊框寬度為1px,通過給第一個容器添加左邊框和其他容器的右邊框來形成垂直等分線。
兩種方法都可以實現垂直等分線,具體應用視情況而定。