css - 使用 CSS 将两个 UL 对齐到相同的基线

Question

尝试让两个 UL 与单个基线对齐，同时让一个 UL 向左对齐，另一个 UL 向右对齐。

目前，UL 未对齐并显示如下:

如何让两个 UL 共享相同的基线？

CSS

#footer ul,
#footer li,
#footer span,
#footer a {
    margin: 0;
    padding: 0;
    position: relative;
}
#footer {
    list-style-type: none;
    padding: 0;
    margin-left: 21px;
    margin-right: 20px;
    text-decoration: none;
}
#footer a{
    text-decoration: none;
    padding: 0 7px;
    color: #777;
}
#footer li {
    display: inline;
}
#footer li > a {
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    color: #777;
}
#footer li:hover a {
  color: #71979f;
}

#social ul,
#social li,
#social span,
#social a {
    margin: 0;
    padding: 0;
    position: relative;
}
#social {
    margin: 0 31px 0 0; 
    padding: 0; 
    height: 15px;
}
#social li {
    margin: 0 8px 0 0; 
    padding: 0; 
    list-style-type: none;  
    height: 15px;
    float: right;
}
#social li.last{
    margin-right:0px;
}
#social li a {
    background-image: url("../images/icon_social.png");
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    display: block;
    height: 15px;
    width: 18px;
}
#social li#social-twitter a{
    background-position: 0px 0px;
}
#social li#social-twitter a:hover {
    background-position: 0px -15px;
}
#social li#social-youtube a{
    background-position: -18px top;
}
#social li#social-youtube a:hover {
    background-position: -18px -15px;
}
#social span {
    display: inline;
    font-size: 11px;
    color: #777;
}

HTML

<div>
<ul id="social">
    <li id="social-youtube" class="last"><a href="#"></a></li>
    <li id="social-twitter"><a href="#"></a></li>
    <li id="social-text"><span>STAY CONNECTED</span></li>
</ul>
<ul id="footer">
    <li><a href='#'><span>Blog</span></a></li>
    <li><a href='#'><span>Contact</span></a></li>
    <li><a href='#'><span>Knowledgebase</span></a></li>
    <li><a href='#'><span>Site Map</span></a></li>
    <li><a href='#'><span>Privacy/Legal</span></a></li>
    <li><a href='#'><span>Mailing List</span></a></li>
</ul>
</div>

Answer 1

ul 标签是 block 元素，您可能需要 float 它们并分配相同的高度:

#social {
  float:right;
  height:20px;
}
#footer {
  float:left;
  height:20px;
}

演示 http://jsfiddle.net/CvLt9/2/