CSS:水平列表垂直分隔符不等长

Question

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

但是，我想在内容之间添加分隔符，但我无法让它们等长，因为内容的垂直长度不同，而且我使用了 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%;*/
}