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

Question

我是前端开发新手。请找到所附图片。

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

第二张图片:我有整行，我需要更改哪个 css 属性以获得第 3/4 行？

Answer 1

您需要一个具有该长度的元素。据我所知，您不能放置长度与元素大小不同的边框。我在这里使用 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>