Question

我正在尝试使用HTML和CSS为网页制作页脚。我已将我的页脚内容定义为具有包含分组内容的不同LI的UL。

但是，我想在内容之间添加分隔符但是我不能让它们同样长，因为内容在垂直长度上有所不同而且我使用border-left。这是一张图片：http://imgur.com/ESdKNkN

这是我的HTML：

<!-- FOOTER -->
<footer>
    <div class="wrapper">
        <div id="centeredfooter">
            <h2 class="Structural">Footer</h2>
            <ul class="clearfix">
                <li id="location">
                    <h3>Location</h3>
                    <address>
                        2601 Mission St. San Francisco CA 94110 <BR>
                        Tel: 123.456.7890 <BR>
                        Fax: 123.456.7890 <BR>
                        info@mysite.com
                    </address>
                </li>

                <li id="contact">
                    <h3>Contact</h3>
                    <ul>
                        <li><a href="#" title="like us on facebook"><img src="img/Facebook.png" alt="facebook icon" /></a></li>
                        <li><a href="#" title="follow us on twitter"><img src="img/Twitter.png" alt="twitter icon" /></a></li>
                        <li><a href="#" title="Join us on Google+"><img src="img/Googleplus.png" alt="youtube icon" /></a></li>
                    </ul> 
                </li>

                <li id="payment">
                    <h3>Payment Methodes</h3>
                    <ul>
                        <li><a href="#" title="pay with MasterCard, get info here"><img src="img/mastercard.png" alt="MasterCard icon" /></a></li>
                        <li><a href="#" title="pay with VISA, get info here"><img src="img/VISA.png" alt="VISA icon" /></a></li>
                        <li><a href="#" title="pay with PayPal, get info here"><img src="img/PayPal.png" alt="PayPal icon" /></a></li>
                        <li><a href="#" title="pay with American Express, get info here"><img src="img/AmEx.png" alt="AmEx icon" /></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</footer>

这里是CSS：

footer {
background-color: #333333;
font-size: 1.4rem;
color: #fff;
font-family: 'Palatino Linotype';
font-weight: normal;
font-style: italic;
text-align: center;
}

#centeredfooter {
   float:left;
   width:100%;
   overflow:hidden;
   position:relative;
   margin: 1rem 0;
}

#centeredfooter ul {
clear: left;
float: left;

position: relative;
left: 50%; 
/* By doing a 50% left here, and a 50% right
   in the li we get a nicely centered footer 
   thanks to our #centeredfooter width =100% */
}

#centeredfooter ul li {
display:block;
float:left;

position: relative;
right: 50%;
}

#centeredfooter ul li a {
display: block;
margin: 0.5rem;
}

#location {
padding-right: 1rem;
}

#contact {
border-left: 1px solid #fff;
padding-left: 1rem;
padding-right: 1rem;
}

#payment {
border-left: 1px solid #fff;
padding-left: 1rem;
}

http://jsfiddle.net/6PhVD/

提前致谢！

Answer 1

这是一个jsfiddle，其中的线条一直延伸到底部。我不认为这正是你所需要的（我删除了水平居中，所以你可以真正看到线条），但它应该向你发送正确的方向。

关键是设置display: table-cell并删除float。

#centeredfooter ul {
    clear: left;
    float: left;
    position: relative;
    /*left: 50%;*/
    /* By doing a 50% left here, and a 50% right
       in the li we get a nicely centered footer 
       thanks to our #centeredfooter width =100% */
}
#centeredfooter ul li {
    display:table-cell;
    /*float:left;*/
    position: relative;
    /*right: 50%;*/
}

CSS：水平列表垂直分隔符不一样长

1 个答案: