CSS: Set border to half width

前端 未结 7 884
说谎
说谎 2021-02-12 21:57

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)
提交回复
热议问题