0

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

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

3 回答 3

0

像这样

演示

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-28T07:29:57.227 回答
0

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-28T07:07:44.040 回答
0

添加尽可能多的列，这是小提琴

小提琴

和改变的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-28T07:21:39.227 回答