html - CSS垂直分隔线

我正在尝试为页脚设置垂直分隔线，但由于与我的无序列表中的元素重叠，因此出现了问题。我怎样才能使它相应地移动到窗口大小和无序列表的位置而不会重叠。

的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>

最佳答案

添加尽可能多的列，你想要的是小提琴

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;
}

为所有元素添加了左浮点数，并以父元素的形式增加了页脚的宽度。

关于html - CSS垂直分隔线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19064246/