html - CSS 垂直分隔线

Question

我正在尝试为我的页脚设置一个垂直分隔线，但我遇到了麻烦，因为它与我的无序列表中的元素重叠。我怎样才能让它根据窗口大小和无序列表的位置相应地移动而不重叠。

CSS

 html, body {
    height: 70%;
}
#wrap {
    min-height: 70%;
}
#main {
    overflow: auto;
    padding-bottom: 140px;
}
#footer {
    position: relative;
    height: 140px;
    margin-left: -20px;
    margin-right: -20px;
    opacity: 0.8;
    clear: both;
    background: #545454;
}
#footer-inner {
    padding-left: 300px;
}
#divider {
    border-left: 1px solid #0099CC;
    height: 100px;
    position: absolute;
    right: 500px;
    top: 10px;
    margin: 0 auto;
    float: center;
}




 </style>

html

 <div id="wrap">
    <div id="main">
    </div>
 </div>

 <div id="footer">
<div id = "divider">
</div>

 <div id = "footer-inner">
     <ul>
     <li> Info </li>
     </ul>

 </div>

Answer 1

添加任意多的列，这里是 fiddle

fiddle

和改变的CSS

html, body {height: 70%;}

#wrap {min-height: 70%;}

#main {overflow:auto;
    padding-bottom: 140px;}  

#footer {position: relative;
 white-space:nowrap;
    height: 140px;
    width:inherit;
    margin-left: -20px;
    margin-right: -20px;
    opacity: 0.8;
    background: #545454; 
    overflow:hidden;
}

.footer-inner{
    width:auto;
    float:left;
    display:block;
}

#divider {
    border-left:1px solid #0099CC; 
    height:100px;
    position:relative;
    top:10px; 
    margin: 0 auto;
    float: left; 
    width:10px;
}

为所有元素添加了左浮动，并根据父元素添加了页脚的宽度。