如何控制边框高度? [英] How to control border height?

问题描述

我有两个div，一个在左边，另一个在右边.现在，我想将这两个div划分为一个边界.但是全高的边框看起来很糟糕.

I have two div, one on the left and the other is on the right. Now I want to divide this two div with a border between them. But the border with full height looks bad.

我想控制边框的高度.我该怎么办?

I want to control the height of the border. How could I do this?

推荐答案

边框将始终位于包含框的全长(元素的高度加上其填充)，除调整外，无法控制它它所应用的元素的高度.如果您需要的只是垂直分隔线，您可以 使用:

A border will always be at the full length of the containing box (the height of the element plus its padding), it can't be controlled except for adjusting the height of the element to which it applies. If all you need is a vertical divider, you could use:

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

使用CSS:

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

在JS Fiddle中演示[a]，调整span.container的高度以调整边框的高度".

Demo at JS Fiddle, adjust the height of the span.container to adjust the border 'height'.

或者，在使用以下HTML的情况下，使用伪元素(::before或::after):

Or, to use pseudo-elements (::before or ::after), given the following HTML:

<div id="left">content</div>
<div id="right">content</div>

以下CSS在与另一个div元素相邻的同一个div元素之前添加了一个伪元素:

The following CSS adds a pseudo-element before any div element that's the adjacent sibling of another div element:

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

JS Fiddle演示.

这篇关于如何控制边框高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！