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

时间:2018-04-18 21:37:51

标签: css

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

Image 1 Image 2

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

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

我不确定这是否是您需要的,但您可以使用线性渐变模拟宽度为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>