有办法限制边界长度吗?

有没有办法限制边界的长度?我有一个有底部边框的<div>，但我想在<div>的左边添加一个只延伸一半的边框。

有没有什么方法可以在不添加额外元素的情况下做到这一点?

当前回答

对于水平线，你可以使用hr标签:

hr { width: 90%; }

但是限制边界高度是不可能的。只有元素高度。

其他回答

这是一个CSS技巧，不是一个正式的解决方案。我保留黑色句点的代码，因为它可以帮助我定位元素。然后，给你的内容上色(颜色:白色)和(margin-top:-5px左右)，让它看起来好像句号不存在。

div.yourdivname:after {
  content: "";
  border-bottom: 1px solid grey;
  width: 60%;
  display: block;
  margin: 0 auto;
}

关于此问题的文章:https://www.steckinsights.com/shorten-length-border-bottom-pure-css/

对于水平线，你可以使用hr标签:

hr { width: 90%; }

但是限制边界高度是不可能的。只有元素高度。

CSS生成的内容可以为您解决这个问题:

div { 位置:相对; ｝ /*主div的边界扩展到50%从左下角*/ div:{后内容:“”; 背景:黑色; 位置:绝对的; 底部:0; 左:0; 高度:50%; 宽度:1 px; ｝ < div > Lorem Ipsum < / div >

(注——内容:“”;声明是必须的，以便pseudo元素呈现)

边界只能按边来定义，而不能按边的分数来定义。所以，不，你不能这样做。

另外，一个新元素也不会是边界，它只会模仿你想要的行为-但它仍然是一个元素。

另一种解决方案是使用背景图像来模拟左侧边框的外观

创建所需的左边框样式作为图形将其放置在div的最左边(使其足够长，以处理旧浏览器中大约两次文本大小的增加) 设置垂直位置的50%从你的div顶部。

你可能需要为IE做一些调整(像往常一样)，但如果这是你想要的设计，那么值得一试。

我通常反对使用CSS固有的图像，但有时如果设计需要它，没有其他的方法。

推荐文章