html – 如何控制边框高度？

概述我有两个div，一个在左边，另一个在右边。现在我想把这两个div与它们之间的边界分开。但是，全高度的边界看起来不错。 我想控制边框的高度。我该怎么做？ 边框总是在包装箱的全长(元素的高度加上其填充)的整个长度，除了调整适用于其的元素的高度之外，它不能被控制。如果您需要的是一个垂直分隔线，您可以使用： <div id="left"> content</div><span class="div 我有两个div，一个在左边，另一个在右边。现在我想把这两个div与它们之间的边界分开。但是，全高度的边界看起来不错。

我想控制边框的高度。我该怎么做？

解决方法 边框总是在包装箱的全长(元素的高度加上其填充)的整个长度，除了调整适用于其的元素的高度之外，它不能被控制。如果您需要的是一个垂直分隔线，您可以使用：

<div ID="left">  content</div><span ></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;}

Demo at JS Fiddle，调整span.container的高度来调整边框’height’。

或者，使用伪元素(:: before或:: after)，给出以下HTML：

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

以下CSS在与另一个div元素的相邻兄弟节点的任何div元素之前添加一个伪元素：

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 demo。

总结

以上是内存溢出为你收集整理的html – 如何控制边框高度？全部内容，希望文章能够帮你解决html – 如何控制边框高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。