页脚对齐问题 - 无法将所有内容对齐到左侧

问题描述 投票:0回答:2

我正在创建一个页脚。几乎一切都已完成。但是,我无法完美地对齐“ul”元素。更具体地说,我无法将元素对齐到左侧。请看看我的笔。 https://codepen.io/john9929/pen/yvrWpP

正如您可以看到“联系方式”和“关于我们”下的“萌芽”,“联系我们”等“信息”下的萌芽未完全对齐左侧。

这是我的页脚代码:

<!-- footer -->
    <div class="footer">
        <div class="container">
            <div class="w3_footer_grids">
                <div class="col-md-3 w3_footer_grid">
                    <h3>Contact</h3>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    <ul class="address">
                        <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
                        <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">[email protected]</a></li>
                        <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
                    </ul>
                </div>
                <div class="col-md-3 w3_footer_grid">
                    <h3>Information</h3>
                    <ul class="info"> 
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="mail.html">Contact Us</a></li>
                        <li><a href="codes.html">Short Codes</a></li>
                        <li><a href="faq.html">FAQ's</a></li>
                        <li><a href="products.html">Special Products</a></li>
                    </ul>
                </div>
                <div class="col-md-3 w3_footer_grid">
                    <h3>Category</h3>
                    <ul class="info"> 
                        <li><a href="products.html">Mobiles</a></li>
                        <li><a href="products1.html">Laptops</a></li>
                        <li><a href="products.html">Purifiers</a></li>
                        <li><a href="products1.html">Wearables</a></li>
                        <li><a href="products2.html">Kitchen</a></li>
                    </ul>
                </div>
                <div class="col-md-3 w3_footer_grid">
                    <h3>Profile</h3>
                    <ul class="info"> 
                        <li><a href="index.html">Home</a></li>
                        <li><a href="products.html">Today's Deals</a></li>
                    </ul>
                    <h4>Follow Us</h4>
                    <div class="agileits_social_button">
                        <ul>
                            <li><a href="#" class="facebook"> </a></li>
                            <li><a href="#" class="twitter"> </a></li>
                            <li><a href="#" class="google"> </a></li>
                            <li><a href="#" class="pinterest"> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="footer-copy">
            <div class="footer-copy1">
                <div class="footer-copy-pos">
                    <a href="#home1"><img src="images/arrow.png" alt=" " class="img-responsive" /></a>
                </div>
            </div>
            <div class="container">
                <p>&copy; 2017 Electronic Store. All rights reserved </p>
            </div>
        </div>
    </div>
    <!-- //footer --> 

以下是CSS代码:

/*-- footer --*/
.footer{
    padding:4em 0;
    background:#fff;
}
.w3_footer_grid h3{
    color: #212121;
    font-size: 1.5em;
    margin-bottom: 2em;
    padding-bottom: .5em;
    position: relative;
    text-transform: uppercase;
}
.w3_footer_grid h3:after{
    content:'';
    background:#3c43a4;
    width:20%;
    height:2px;
    position:absolute;
    bottom:0;
    left:0;
}
.w3_footer_grid p{
    color:#999;
    line-height:1.8em;
    margin-bottom:2em;
}
.w3_footer_grid ul li {
    list-style-type: none;
    margin-bottom: 1em;
    color: #999;
    font-size: 14px;
}
.w3_footer_grid ul.address li i {
    color:#414141;
    border: 1px solid #414141;
    padding: .5em;
    margin-right: 1em;
}
.w3_footer_grid ul.address li span {
    display: block;
    margin-left: 3em;
}
.w3_footer_grid ul li a {
    color: #999;
    text-decoration: none;
}
.w3_footer_grid ul li a:hover {
    color:#212121;
}
.w3_footer_grid ul.info li a {
    padding-left:2.2em;
    background: url(../img/img-sp.png) no-repeat -6px -98px;
}

.w3_footer_grid h4{
    margin:2em 0 1em;
    font-size:1.2em;
    color:#3c43a4;
}
/*-- social-buttons --*/
.agileits_social_button ul li{
    display:inline-block;
    margin: 0 !important;
}
.agileits_social_button ul li a{
    background: url(../img/img-sp.png) no-repeat 1px -130px #414141;
    display: block;
    width: 35px;
    height: 35px;
    -webkit-transition:.5s all;
    -moz-transition:.5s all;
    -o-transition:.5s all;
    -ms-transition:.5s all;
    transition:.5s all;
} 
.agileits_social_button ul li a.twitter{
    background-position:-41px -130px; 
} 
.agileits_social_button ul li a.google{
    background-position:-81px -130px; 
} 
.agileits_social_button ul li a.pinterest{
    background-position:-123px -130px; 
}
.agileits_social_button ul li a:hover {
    background-color: #3c43a4;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;  
    border-radius: 50%;
}
.footer-copy1 {
    position: relative;
    padding: 2em 0 0;
    border-bottom: 1px solid #d6d6d6;
}
.footer-copy-pos {
    position: absolute;
    right: 12%;
    bottom: -75%;
    width: 50px;
    height: 50px;
    border: 3px solid #ff5063;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    -ms-border-radius: 25px;
    box-shadow: 0px 0px 5px 0px #ff5063;
    -webkit-transition:.5s all;
    -moz-transition:.5s all; 
    transition:.5s all;

}
.footer-copy-pos:hover {
    box-shadow: 0px 0px 30px 5px #ff5063;
}
.footer-copy p{
    margin:4em 0 0;
    text-align:center;
    color:#999;
    line-height:1.8em;
}
.footer-copy p a{
    color:#3c43a4;
    text-decoration:none;
}
.footer-copy p a:hover{
    color:#999;
}
/*-- //footer --*/

我该如何解决这个问题?

html css
2个回答
1
投票

请尝试以下代码:

.w3_footer_grid ul{
      padding-left:0;
    }

1
投票

你的问题不是很精确。你想要所有的<li>元素一直到左边?然后删除你在这里给出的填充:

.w3_footer_grid ul.info li a {
    padding-left:2.2em;
    background: url(../img/img-sp.png) no-repeat -6px -98px;
}
© www.soinside.com 2019 - 2024. All rights reserved.