Html 如何控制边框高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3953293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control border height?
提问by Jichao
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.
我有两个div，一个在左边，另一个在右边。现在我想用它们之间的边框来划分这两个 div。但是全高的边框看起来很糟糕。
I want to control the height of the border. How could I do this?
我想控制边框的高度。我怎么能这样做？
回答by David says reinstate Monica
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 coulduse:
边框将始终位于包含框的全长（元素的高度加上其填充），除了调整它所应用到的元素的高度外，无法对其进行控制。如果您只需要一个垂直分隔线，您可以使用：
<div id="left">
content
</div>
<span class="divider"></span>
<div id="right">
content
</div>
With css:
使用 CSS：
span {
display: inline-block;
width: 0;
height: 1em;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
Demo at JS Fiddle, adjust the height of the span.containerto adjust the border 'height'.
演示在 JS Fiddle，调整高度span.container以调整边框“高度”。
Or, to use pseudo-elements (::beforeor ::after), given the following HTML:
或者，使用伪元素（::before或::after），给定以下 HTML：
<div id="left">content</div>
<div id="right">content</div>
The following CSS adds a pseudo-element before any divelement that's the adjacent sibling of another divelement:
以下 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%;
}
回答by ?inh Ti?n V?
Only using line-height
只使用 line-height
line-height: 10px;
回答by Alexander Sidikov Pfeif
not bad .. but try this one ... (should works for all but ist just -webkit included)
不错..但是试试这个......（应该适用于所有人，但只包括 -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;
">
//Feel free to edit and add all other browser..
//随意编辑和添加所有其他浏览器..
回答by Abdul Sadik Yalcin
I was just looking for this... By using David's answer, I used a span and gave it some padding (height won't work + top margin issue)... Works like a charm;
我只是在寻找这个......通过使用大卫的答案，我使用了一个跨度并给了它一些填充（高度不起作用+顶部边距问题）......就像一个魅力;
See 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;
}
回答by Pekka
I want to control the height of the border. How could I do this?
我想控制边框的高度。我怎么能这样做？
You can't. CSS borders will always span across the full height / width of the element.
你不能。CSS 边框将始终跨越元素的整个高度/宽度。
One workaround idea would be to use absolute positioning (which can accept percent values) to place the border-carrying element inside one of the two divs. For that, you would have to make the element position: relative.
一种解决方法是使用绝对定位（可以接受百分比值）将带边框的元素放置在两个 div 之一内。为此，您必须制作 element position: relative。
回答by DanMan
You could create an image of whatever height you wish, and then position that with the CSS background(-position) property like:
您可以创建任意高度的图像，然后使用 CSS background(-position) 属性定位它，例如：
#somid { background: url(path/to/img.png) no-repeat center top;
Instead of center topyou can also use pixel or % like 50% 100px.
center top您也可以使用 pixel 或 % like代替50% 100px。
http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
