Question

我是html和css的新手，我遇到了很多元素的问题。我页面中的元素彼此重叠。另外我遇到的另一个问题是CSS无法正常工作，从而使图片和其他元素的大小不合适等。

这是我的HTML代码......

        <!doctype html>
        <html lang="en">

        <head>
        <link rel="stylesheet" type="text/css" href="homepageuni.css">
        <meta charset="utf-8">
        <meta name="homepage" content="a homepage for the survey website">

        <title> Kingston University Survey Homepage</title>
        </head>
        <body>

        <img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
        <div id = "buttons">
        <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
        <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>

        <a href="http://www.w3schools.com/html/">LogIn</a>
        </div>
        <br/><br/><br/><br/><br/><br/>
        <img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />

        <div id="footer">
        <p> copyright </p> 
        <img src="facebookpic.png" alt="facebookpic" />
        <br/>
        <img src="twitterpic.jpg" alt="twitterpic"/>
        </body>
        </div>
        </html>

这是我的CSS代码......

    #middlepic
    {
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    #uni
    {
        display: block;  
        padding-left:50px;
        max-height: 150px;
        max-width: 200px;
        width: 250px;
        height: 250px;
    }

    #buttons
    {

        top: 50%;
        left: 50%;
        margin-right: auto;
        margin-left: auto;
        width: 300px;
        height: 40px;
    }

    #footer
    {
    width: 100px;
    height:100px;
    }

Answer 1

我不确定哪个元素应该在哪里，但要确保结束体标记是结束html标记之前的最后一个标记。在它之前移动结束div标签。

以下是一些经过修改的CSS：

#middlepic
{
    display: block;
    margin: 0 auto;
}

#uni
{
    margin: 0 auto;
    display: block;
    width: 250px;
    height: 200px;
}

#buttons
{
    margin: 0 auto;
    width: 300px;
    line-height: 40px;
}

#footer
{
width: 100%;
height:100px;
display: inline-block;
text-align: center;
}

http://jsfiddle.net/om7qfebz/1/

在html页面和外部CSS中相互重叠的元素无法正常工作

1 个答案: