我有一个 <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>
关于html - 如何在 <div> 中定位列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29863057/