CSS: Set border to half width

前端未结

关注

 7  886

Consider following:


...


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

It will set the bot

相关标签:

7条回答

北恋

2021-02-12 22:24

You could do this:

    .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>

But there are infinite possibilities. Some are more semantically correct than others; this solution is simply a quick fix.

0 讨论(0)

耶瑟儿～

2021-02-12 22:34

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

0 讨论(0)

轮回少年

2021-02-12 22:35
Can you throw an <hr> at the bottom of your box?
```
<div class="box">
    ...
    <hr>
</div>

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}
```
http://jsfiddle.net/MuAKF/
0 讨论(0)
发布评论:

提交评论
- 加载中...

我寻月下人不归

2021-02-12 22:35

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

0 讨论(0)

隐瞒了意图╮

2021-02-12 22:36

You can Use ::after or ::before pseudo-selectors. Like:

<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;
}

Here is the jsfiddle

0 讨论(0)

刺人心

2021-02-12 22:38

I would suggest doing something like this, works well in 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>

0 讨论(0)

1 2 下一页