CSS上的边框高度

Question

我有一个TD表,在它右边我想添加一个1像素边框,所以我做到了这一点:

table td {
    border-right:1px solid #000;
}

它工作正常,但问题是边框的高度取TD的总高度.

有没有办法设置边框的高度？

Answer 1

我有另一种可能性.这当然是一种"更新"的技术,但对我的项目来说工作充分.

它只适用于需要一个或两个边框的情况.我从来没有用4个边界做过......说实话,我还不知道答案.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

我希望这对你也有帮助,对我来说,这是一个简单的解决方法.

Answer 2

不,没有.边框总是和元素一样高.

您可以通过将单元格的内容包装在a中<span>,并对其应用高度/边框样式来实现相同的效果.或者通过在1像素宽的PNG(一个正确的高度)中绘制一条短垂直线,并将其作为背景应用于单元格:

background:url(line.png) bottom right no-repeat;

Answer 3

是的,您可以在定义边框后设置线高,如下所示:

border-right: 1px solid;
line-height: 10px;

Answer 4

基于@ReBa上面的答案，这个custom-border课程对我有用。

模组：

• 使用 withborder 而不是 backaground-colorsincebackground-color并不一致。
• 设置height&top的属性:after，使总数达到100%wherebottom的值是隐式的。

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}

<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

祝你好运...

Answer 5

这将在单元格左侧添加一个居中边框，其高度为单元格高度的 80%。您可以在此处参考完整的边框图像文档。

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}

Answer 6

对于td元素,line-height将成功允许您调整边框高度,如SPrince所述.

对于其他元素(如列表项),可以使用line-height控制边框高度,使用margin-top和margin-bottom控制实际元素的高度.

以下是两个工作示例:http: //jsfiddle.net/byronj/gLcqu6mg/

列表项的示例:

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>