CSS：将边框设置为一半宽度

Question

CSS：将边框设置为一半宽度

21

考虑以下内容：

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

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

它将设置盒子的底部边框为全宽(500px)。但是我想将底部边框设置为300px，位于盒子底部中央，应该如何操作？

- user1117313

1

你能在盒子底部放置一个居中的<hr>吗？然后你可以根据需要精确地设置样式。 - Chase Florell

实际上，填充是用于控制的。 - noob

@micha 这也将填充 box 中的内容。 - Chase Florell

7个回答

11

你能否在你的盒子底部添加一个 <hr> 标签？

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

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

http://jsfiddle.net/MuAKF/

- Chase Florell

我下降票了这个答案，不是因为它是错误的 - 如果您有一种影响HTML结构的方法，它是完全有效的解决方案。但下面有一个更好的答案：https://dev59.com/e2oy5IYBdhLWcg3wCpzQ#24032086 这更好，因为它是一个纯CSS解决方案。 - dev_masta

@dev_masta FYI：这篇文章是2012年的。我想十年间已经发生了很多变化！祝你编程愉快 :) - Chase Florell

抱歉，我实际上希望@user1117313更改所选答案，而不是让你失去积分。会在你的其他回答中弥补这一点;) - dev_masta

@dev_masta 在SO中，仅因为有更好的答案存在就不需要/不应该对答案进行负评。 - Joel H

抱歉，各位，我现在看这个帖子时，不知道为什么要对它进行负评。就像我说的，这是一个完全有效的解决方案，虽然不是100%的CSS解决方案，但是除非该帖子被编辑，否则SO不会允许我更改我的投票。 - dev_masta

5

.box {
    padding-bottom: 10px;
    background-image: linear-gradient(#ccc,#ccc);
    background-size: 50% 2px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

- Shirley Ashby

1

截至2022年，这应该是被接受的答案，简单而优雅。 - Mark

2

你可以这样做：

    .box {
        position: relative;
        width: 500px;
    }
    .border {
        position: aboslute;
        background: #ccc;
        left: 100px;
        bottom: 0;
        width: 300px;
        height: 1px;
    }

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

但是有无限的可能性。其中一些比其他的更符合语义学规范；这个解决方案只是一个快速修复。

- wanovak

2

您可以使用背景图片：

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
    background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
    background-position: bottom left;
    background-repeat:no-repeat;
}

- khollenbeck

是的！如果它是一个简单的渐变或纯色，您还可以使用CSS渐变来在CSS中生成图像：background-image: linear-gradient(black, black); background-size: 50% 1px; background-position: 50% 100%。 - Razvan Caliman

0

我建议像这样做，这在Firefox中效果很好。

<style type="text/css">

.box{

    width: 500px;

    height: 20px;

}

.boxHalfWidth{

    width: 250px;

    height: 1px;

    border-bottom: 1px solid #CCC;

}

</style>

</head>

<body>

<div class="box">

some data

<div class="boxHalfWidth"></div>

</div>

</body>

- redDevil

不必要地使用额外的HTML元素。 - Razvan Caliman

-1

css:
    display: block; 
    margin: 0 auto; 
    width: 50%; 
    padding-top: 20px; 
    border-bottom: 1px solid #000;

- Guru

2

欢迎来到 Stack Overflow。仅有代码的答案通常可以通过添加解释它们如何以及为什么工作来得到改进。提供的 CSS 并不清楚您希望读者做什么。当回答已经存在七个答案的八年老问题时，非常重要的是指出您的答案解决了问题的哪个新方面。 - Jason Aller

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Melniciuc Costea · Accepted Answer

您可以使用 ::after 或 ::before 伪选择器。例如：

<div> something here </div>

CSS：

div {
    width: 500px;
    height: 100px;
    position: relative;
    padding-top: 20px;
    margin-top: 50px;
}

div::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    left: 25%;
    border-top: 1px solid red;
}

这里是jsfiddle