Question

我有一个<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中定位列表呢？

Answer 1

我认为这就是你想要的。当你使用<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>

Answer 2

您还必须更改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;
}
#footer-list{
    text-align: center;
}

如何在<div>中定位列表？

2 个答案: