How to make
full width?

后端 未结 5 1613
走了就别回头了
走了就别回头了 2021-02-19 08:03

http://jsfiddle.net/bh2f6/1/

I want to make this


so it will stretch the full width, right to the edges of its parent container. I have tried add
相关标签:
5条回答
  • 2021-02-19 08:40

    Something like this might work...

    hr {
      padding: 50px 0;
      border: none;
    
      &:before {
        // full-width divider
        content: "";
        display: block;
        position: absolute;
        right: 0;
        max-width: 100%;
        width: 100%;
        border: 1px solid grey;
      }
    }
    

    http://codepen.io/achisholm/pen/ZWNwmG

    0 讨论(0)
  • 2021-02-19 08:43

    Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.

    Change your CSS to this:

    .single-article hr {
        margin: 30px -20px 20px;
        border: 0;
        border-top: 1px solid #c9c7c7;
    }
    

    See working jsFiddle demo

    0 讨论(0)
  • 2021-02-19 08:43

    Removing Padding should work for you

    Working Example

    .single-article .article-container-inner {
        background: #f0eded;
        border: 1px solid #c9c7c7;
        margin-bottom: 20px;
    }
    .single-article hr {
        margin-top: 30px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #c9c7c7;
        width:100%
    }
    
    0 讨论(0)
  • 2021-02-19 08:54

    You mean like this?

    Fiddle

    just change the padding to padding: 20px 0;

    0 讨论(0)
  • 2021-02-19 08:59

    HR Secret things, you must know.

    When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.

    <hr class="my-hr-line">
    
    .my-hr-line {
        position: relative;
        left: -15px;
        width: calc(100% + 30px);
        height: 2px;
        border: 2px solid blue;
    }
    

    Hope it will help many one.

    0 讨论(0)
提交回复
热议问题