如何减少css中边框底线的长度

Question

我是前端开发的新手。请找到附件。

第一张图片：比较2个值时，有一条水平线，但它是长度的3/4。

第二张图片：我有完整的行，哪个css属性需要更改才能获得3/4行？

Answer 1

你需要一个有这个长度的元素。 AFAIK你不能放置与元素大小不同的长度的边框。在这里，我使用div内的li进行操作，因为<li>标记的工作方式。它在子弹和内容之间以“间隙”（通常称为边距或填充）呈现。因为<div>位于<li>内，其宽度已经小于<li>的宽度。

li > div {
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  padding: 8px 4px;
  margin-bottom: -1px;
}

<ul>
<li><div>Foo 1</div></li>
<li><div>Foo 2</div></li>
</ul>

Answer 2

要达到预期的效果，请使用下面的选项，使用左侧填充来实现左侧的间隙

app.post('/sc', function(req, res){
        var url = req.body.convo
        console.log(url)

        getPic(url);
    })

.parent{
  padding-left:20px;
}
.child{
  width:100%;
  height:100px;
  background:yellow;
  border-bottom:1px solid black;
}

代码示例 - https://codepen.io/nagasai/pen/GdRLOx

Answer 3

我不确定这是否是您需要的，但您可以使用线性渐变模拟宽度为75％的边框。

.box{
  width: 250px;
  height: 50px;
  background: #eee;
  border-bottom: 5px solid transparent;
  border-image: linear-gradient(to right, black 0%, black 75%, transparent 75%);
  border-image-slice: 1;
}

<div class="box"></div>