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

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>

Answer 2

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

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

为所有人添加了float，并根据父级添加了页脚的宽度。

Answer 3

喜欢这个

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

CSS垂直分隔线

3 个答案: