Question

我正在尝试将a和p元素放入div块中，但是当我打开开发人员工具时，它表明它们不是div元素的子元素。我做错了什么？有人请建议我正确的做法。 P.S我是网页设计的新手。

html和css：

<div id="header">
            <!-- header -->
            <p id="banner-text">Banner Text</p>
        </div>

        <div id="body">
            <!-- body -->
            <div id="testid">
                <a href="#">
                    <img src="http://icdn.pro/images/en/g/r/green-check-icone-4881-128.png"/>
                    <p>Testing...</p>
                </a>
            </div>
        </div>

        <div id="footer">
            <!-- footer -->
        </div>

#header
{
    width: 980px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    background: #abcdef;
}
#body
{
    width: 980px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    background: #aaabbb;
}
#footer
{
    width: 980px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    background: #abcdef;
}
#banner-text
{
    float: left;
    position: relative;
    left: 30px;
    top: -45px;
    font-size: 50px;
}

#testid
{
    position: relative;
    width: 100px;
    height: 100px;
    left: 0px;
    top: 0px;
}

#testid a
{
    float: left;
    position: relative;
    width: 1px;
    height: 1px;
}

#testid img
{
    float: left;
    position: relative;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 15px;
}

#testid p
{
    float: left;
    position: relative;
    left: 8px;
    top: -90px;
    width: 90px;
    height: 0px;
    color: #222;
    text-shadow: 0px 2px 3px #555;
}

jsfiddle：http://jsfiddle.net/R4anp/

问候。

Answer 1

您尝试使用不符合W3C的内联元素<p>来包装块元素<a>。您可以将链接包装在段落标记中吗？

修改：这在HTML5中有效。

Answer 2

使用HTML5 doctype

应该没问题

<!DOCTYPE html>

DIV中的a和p

2 个答案: