CSS垂直分隔线

我想为我的页脚设置一个垂直分隔线，但即时通讯有麻烦，因为它与我无序列表中的元素重叠。我怎样才能做到这一点，因此它将相应地移动到窗口大小和无序列表的位置而不重叠。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>

来源

2013-09-28 gsm4110

请拨弄你的代码 – Anobik

http://jsfiddle.net/f9LLn/ – gsm4110

CSS

html, body {height: 70%;} 
#wrap {min-height: 70%;} 
#main {overflow:auto; padding-bottom: 140px;} 

#footer { 

position: relative; 
height: auto; 
margin-left: -20px; 
margin-right: -20px; 
opacity: 0.8; 
clear:both; 
background: #545454; 
padding: 15px; 
} 

#footer-inner 
{ 
    Padding:10px 25px; 
    border-right:1px solid #fff; 
    float:left; 
} 

#divider 
{ 
clear:both; 
} 
</style> 
</head> 
<body>

HTML

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

<div id="footer"> 

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


</div> 
<div id = "divider"> 
</div> 
</div> 
</body> 
</html>

来源

2013-09-28 07:07:44 navin2013

添加尽可能多的列，你想这里的小提琴

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

加浮动留给所有，并添加在页脚中的宽度家长的毫秒数。

来源

2013-09-28 07:21:39 Anobik

像这样

demo

CSS

*{ 
    margin:0; 
    padding:0; 
} 
html, body { 
    height: 70%; 
} 
#wrap { 
    min-height: 70%; 
} 
#main { 
    overflow: auto; 
    padding-bottom: 140px; 
} 
#footer { 
    position: relative; 
    height: auto; 
    margin-left: -20px; 
    margin-right: -20px; 
    opacity: 0.8; 
    clear: both; 
    background: #545454; 
    padding: 15px; 
    float: left; 
} 
#footer-inner { 
    Padding: 10px 25px; 
    float: left; 
} 
#footer-inner ul{ 
    float:left; 
    border-right: 1px solid #fff; 
    margin:0 30px; 
    padding:0 30px; 

} 

#divider { 
    clear: both; 
}

来源

2013-09-28 07:29:57 falguni

CSS垂直分隔线

回答

相关问题