html - 对齐边框 CSS

标签 html css alignment border

我对我得到的布局很困惑。如何对齐文本底部的边框。下面是布局图像和我的 html ..

IMAGE OF THE LAYOUT

HTML

<div class="submission-box-wrapper">
    <div class="submission-box-inner">
        <h5>ON-CAMERA, AGES 3 &amp; UP:</h5>

        <h6>For Submissions to the Atlanta Office:</h6>
        <p>J Pervis Talent Agency
        949 Image Avenue, Suite C
        Atlanta, GA 30318</p>

        <h6>For Submission to the Louisiana Office:</h6>
        <p>J Pervis Talent Agency
        PO Box 3215
        Baton Rouge, LA 70821</p>

    </div>
</div>

待处理的 CSS

.submission-box-wrapper {
    position: relative;
}

.submission-box-inner {
    position: absolute;
    padding: 20px;
    border: 1px solid rgb(226, 226, 226);
    width: 100%;
}

.submission-box-inner h5 {
    font-family: "Open Sans";
    color:  #dcab06;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
}

.submission-box-inner h6 {
    font-family: "Open Sans";
    font-weight: 800;
    line-height: 30px;
    text-align: left;
 }

.submission-box-inner p {
    font-family: "Open Sans";
    color:  #000000;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
 }

有人可以帮我一下吗..

谢谢..

最佳答案

我认为我的方法不是最好的,但仍然做你想做的,所以你为什么不给它一个机会。
DEMO

新 CSS

.submission-box-inner {
    position: relative;
    padding: 20px;
    border: 1px solid rgb(226, 226, 226);
    width: 100%;
    top:10px;
}
.submission-box-inner h5 {
    font-family: "Open Sans";
    color: #DCAB06;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    position: absolute;
    top: -40px;
    background-color: white;
    padding: 0 5px;
}

关于html - 对齐边框 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32814465/

相关文章:

vim 如何逗号对齐

html - 有没有办法编写屏幕阅读器会忽略的内容?

html - 如何在整个图像上应用蒙版?

html - CSS - 拉伸(stretch)边 imgs

javascript - Fullcalendar jquery 插件高度问题

html - div 的高度是父级宽度的 80%?

javascript - 如何从 Angular 2 中的导入组件访问数据?

html - 将子元素 <div> 放置在固定位置的父元素 <div> 中

html - 为 outlook 调整 HTML 电子邮件中的文本

html - 如何将图标与其标题对齐?