如何控制边框高度？

Question

我有两个div，一个在左边，另一个在右边。现在我想将这两个div除以它们之间的边界。但是全高的边界看起来很糟糕。

我想控制边框的高度。我怎么能这样做？

Answer 1

边框将始终位于包含框的整个长度（元素的高度加上其填充），除了调整其应用的元素的高度之外，它无法控制。如果您只需要一个垂直分隔符，可以使用：

<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;
}

Demo at JS Fiddle，调整span.container的高度以调整边框'高度'。

或者，使用伪元素（::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

Answer 2

仅使用line-height

line-height: 10px;

Answer 3

不错......但试试这个...（应该适用于所有人，但不仅仅包括-webkit）

<br>
<input type="text" style="
  background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">

//随意编辑并添加所有其他浏览器..

Answer 4

我只是在寻找这个...通过使用David的答案，我使用了一个跨度并给了它一些填充（高度赢了工作+上边距问题）......就像一个魅力;

请参阅fiddle

<ul>
  <li><a href="index.php">Home</a></li><span class="divider"></span>
  <li><a href="about.php">About Us</a></li><span class="divider"></span>
  <li><a href="#">Events</a></li><span class="divider"></span>
  <li><a href="#">Forum</a></li><span class="divider"></span>
  <li><a href="#">Contact</a></li>
</ul>

.divider {
    border-left: 1px solid #8e1537;
    padding: 29px 0 24px 0;
}

Answer 5

  

我想控制边框的高度。我怎么能这样做？

你做不到。 CSS边框将始终跨越元素的整个高度/宽度。

一个解决方法是使用绝对定位（可以接受百分比值）将带边框元素放在两个div中的一个内。为此，您必须创建元素position: relative。

Answer 6

您可以创建任意高度的图像，然后使用CSS背景（-position）属性定位，如：

#somid { background: url(path/to/img.png) no-repeat center top;

您可以使用像center top那样的像素或％来代替50% 100px。

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position