Question

我正在尝试在顶部和底部之间添加边框分隔符。为了突出这一点，我在下面的img上加注了红线。

到目前为止，我一直在为此苦苦挣扎。我设法使白线显示出来。不幸的是，我无法将其作为.footer-border容器的100％，如红线所示，在任一侧都保留了填充。每次我尝试在容器中使用100％容器时，它都会折断并从页面的右侧离开（如当前白线所示）。

<footer>
    <section class="footer-top">
        <div class="container">
            <div class="row footer-border">


                    <div class="col-md-3 footer-top-one">
                        <a title="Contrast" class="footer-logo" href="<?php echo site_url() ?>"><img src="<?php echo esc_url( get_template_directory_uri() )?>/assets/img/contrast-logo-white-horizontal.svg"></a>
                        <p>We are a specialist eCommerce digital marketing agency. As our name suggests, we do things differently.</p>
                        <a target="_blank" href="https://www.facebook.com/contrast.digital/"><i class="fab fa-facebook-f"></i></a>
                        <a target="_blank" href="https://twitter.com/contrasttalk"><i class="fab fa-twitter"></i></a>
                        <a target="_blank" href="https://www.linkedin.com/company/contrastuk/"><i class="fab fa-linkedin-in"></i></a>
                        <a target="_blank" href="https://www.instagram.com/contrast.digital/"><i class="fab fa-instagram"></i></a>
                        <a target="_blank" href="https://www.youtube.com/channel/UCb4cTmxtsT-Wdcdi4mmsx9Q?view_as=subscriber"><i class="fab fa-youtube"></i></a>
                    </div>

                    <div class="col-md-2 footer-top-three">
                        <h4>Discover</h4>
                        <nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation">       
                        <?php
                        wp_nav_menu( array(
                            'theme_location'    => 'footer_discover',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_id'      => 'footer-top-nav',
                            'menu_class'        => 'nav navbar-nav ml-auto',
                            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'            => new WP_Bootstrap_Navwalker()
                        ) );
                        ?>
                        </nav>
                    </div>

                    <div class="col-md-2 footer-top-two">
                        <h4>Derby</h4>
                        <p>St George Court, Alfreton Rd</p>
                        <p>Derby</p>
                        <p>DE21 4AP</p>
                        <b><a href="tel:+01332300583"><p class="footer-phone-number">01332 300 583</p></a></b>
                        <b><a href="/contrast/contact/" target="_top"><p>Contact Our Team</p></a></b>
                    </div>

                    <div class="col-md-2 footer-top-two">
                        <h4>Nottingham</h4>
                        <p>26-30 Stoney St</p>
                        <p>Nottingham</p>
                        <p>NG1 1LL</p>
                        <b><a href="tel:+01332300583"><p class="footer-phone-number">01332 300 583</p></a></b>
                        <b><a href="/contrast/contact/" target="_top"><p>Contact Our Team</p></a></b>
                    </div>

                    <!-- <div class="col-md-2 footer-top-four">
                        <h4>Resources</h4>
                        <nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation">
                        <?php
                        wp_nav_menu( array(
                            'theme_location'    => 'footer_resourses',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_id'      => 'footer-top-nav',
                            'menu_class'        => 'nav navbar-nav ml-auto',
                            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'            => new WP_Bootstrap_Navwalker()
                        ) );
                        ?>
                        </nav>
                    </div> -->

                    <div class="col-md-3 footer-top-five">
                        <h4>Growth Strategies</h4>
                        <p>We’ll send you growth strategies you can implement yourself to give your eCommerce business the competitive edge it deserves.</p>
                        <a class="clear footer-cta" title="Send Me Growth Strategies" href="/contrast/newsletter/"><button>Send Me Growth Strategies</button></a>
                    </div>


            </div>
        </div>
    </section>
    <section class="footer-bottom">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-auto">
                  <p>Company Reg No. 11332749</p>
                </div>
                <div class="col-lg-auto">
                  <p>Copyright &copy; <?php echo date("Y"); ?> Contrast Digital Ltd</p>
                </div>
                <div class="col-lg-auto p0">
                    <nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation">
                    <?php
                    wp_nav_menu( array(
                        'theme_location'    => 'footer_privacy',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_id'      => 'footer-privacy-nav',
                        'menu_class'        => 'nav navbar-nav ml-auto',
                        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                        'walker'            => new WP_Bootstrap_Navwalker()
                    ) );
                    ?>
                    </nav>
                </div>
            </div>
        </div>
    </section>
</footer>

    footer {

    background: $black;
    margin: 30px;
    color: $white;
    margin-top: 30px;

    section.footer-top {

        padding: 40px 0;

        .footer-border::before {
            content:'';
            position: absolute;
            border-bottom: 1px solid $white;
            width: 100%;
        }

        p {
            font-size: 0.762em;
        }

        .footer-logo img {
            width: 170px;
            margin-bottom: 10px;
        }

        h4 {
            margin-top: 0;
        }

        .footer-top-one p {
            margin-bottom: 20px;
        }

        a i.fab {
            padding-right: 10px;
            color: $white;
        }

        .footer-top-two {

            b {
                font-weight: 400;
            }

            a { 

                &:hover {
                    color: $white;
                }
                p { 
                    color: $white;
                }
            }

            .footer-phone-number {
                margin-top: 20px;
            }

            p {
                margin-bottom: 0;
            }
        }

        ul#menu-footer-discover-menu, ul#menu-footer-resources-menu {

            margin-top: 0;
            display: inline;

            a.nav-link {
                color: $white;
                font-size: 0.762em;
                padding: 0;
            }
        }

        a.clear.footer-cta {

            margin-left: 0;

            button {

                padding: 10px 31px;
                color: $white;
                font-size: 0.714em;
                background-color: Transparent;
                background-repeat: no-repeat;
                border: solid $white 1px;
                cursor: pointer;
                overflow: hidden;
                outline: none;

                &:hover {
                    background-color: $white;
                    border: solid 1px $white;
                    color: $black;
                }
            }
        }

    }

    section.footer-bottom {

        padding: 40px 0;

        p {
            font-size: 0.667em;
            color: $white;
            text-align: center;
            margin-bottom: 0;
        }
    }

    #menu-footer-privacy-menu {
        margin-top: 0px;
    }

    #footer-privacy-nav a.nav-link {
        color: $white;
        font-size: 0.667em;
        padding: 0;
    }

    #footer-privacy-nav .menu-item {
        position:relative;
        margin-right: 20px;
        &:last-of-type {
            margin-right: 0;
        }
    }

    #footer-privacy-nav .menu-item:hover::after, #footer-privacy-nav .menu-item.current-menu-item:after {
        content:'';
        position: absolute;
        width: 110%;
        height: 0;    
        left: -5%;
        right: 5%;
        bottom: -10px;
        border-bottom: 1px solid $white;  
    }

    #footer-privacy-nav .menu-item:active::after {
        content:'';
        position: absolute;
        width: 110%;
        height: 0;    
        left: -5%;
        right: 5%;
        bottom: -10px;
        border-bottom: 1px solid $white; 
    }
}

.footer-bottom:before {
    content:'';
    position: absolute;
    width: auto;
    height: 0;    
    left: 0;
    border-bottom: 1px solid $white;  
}

Answer 1

您可以尝试

footer{
  width:100%;
  overflow:hidden;
  display:inline-block;
   border:1px solid #000000;
}

.container{
 margin: 20px; 
 
}
.footer-border{
 height:100px;
 position:relative;
}
.footer-border:after{
  position :absolute;
  left:0;
  right:0;
  bottom:0;
  content:"";
  height:1px;
  width:100%;
  background-color:#ff0000;
}
.footer-border:before{
  position :absolute;
  left:0;
  right:0;
  top:0;
  content:"";
  height:1px;
  width:100%;
  background-color:#ff0000;
}

<footer>
  <div class="container">
    <div class="footer-border">

    </div>
  </div>
</footer>

如何将:: after边框添加到div

1 个答案: