我有一个<div>
,它的背景图片。现在,我想在该Div中添加一个列表,以便将其放置在
http://i.stack.imgur.com/VWmB2.png
您可以在上图中看到我有背景和列表,但无法定位。
我的密码
<div id="footer">
<div id="footer-content">
<div id="footer-list">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Blog</a></li>
<li><a href="#contact">About FF</a></li>
<li><a href="#about">FAQ</a></li>
<li><a href="#about">How To Play</a></li>
<li><a href="#about">Terms of Use</a></li>
<li><a href="#about">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
CSS--
#footer-list ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 500px;
margin-top: 100px;
}
#footer
{
background-image: url(/img/footer.png);
height: 140px;
width: 1820px;
background-repeat: no-repeat;
left:0px;
bottom: 0px;
}
我的CSS的问题是当我给'margin-top:100px'ul时,它会掉下来,但背景图片也掉了。
那么如何将列表放置在div中呢?
我想这就是你想要的。当您使用时,<ul>
您不能<div>
在其中使用。所以签出这个
#footer-content ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 500px;
}
#footer-content ul li {
display: inline;
}
#footer
{
background-image: url('http://i.stack.imgur.com/VWmB2.png');
height: 140px;
width: 1820px;
background-size: 1820px 140px;
background-repeat: no-repeat;
left:0px;
bottom: 0px;
padding-top:50px;
}
<div id="footer">
<div id="footer-content">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Blog</a></li>
<li><a href="#contact">About FF</a></li>
<li><a href="#about">FAQ</a></li>
<li><a href="#about">How To Play</a></li>
<li><a href="#about">Terms of Use</a></li>
<li><a href="#about">Privacy Policy</a></li>
</ul>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句