html – 我如何定位列表?

发布时间:2020-08-11 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 我如何定位列表?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我有一个< 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 – 我如何定位列表?全部内容,希望文章能够帮你解决html – 我如何定位列表?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!