Question

我已经有一段时间了。我已经瞪眼了，我已经尝试了所有我能想到的但却无法弄清楚为什么我无法获得和＆＃34; p＆＃34;或＆＃34; h3＆＃34;显示在我的＆＃34; li＆＃34;或＆＃34; a＆＃34;标签。有人可以看看我有什么，并告诉我我做错了什么以及我需要做什么才能在我的方框中显示文字？任何帮助将非常感激。抱歉我的格式化。所以不要让我编辑。

*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.GreenBoxContainer{
    margin: 0 auto;
    width: 920px;
    padding: 0px;
    background-color: black;
    font-size: 0;
    display: inline-block;
    height: 300px;
}

.GreenBox{
    border-radius: 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px; 
    display: inline-block;
    width: 300px;
    height: 300px;
}

.box11{
    margin-right: 10px;
    background-color: white;
}
.box22{
    background-color: white;
}
.box33{
    margin-left: 10px;
    background-color: white;
}

/* Change gradient here: http://www.colorzilla.com/gradient-editor/ */
.GreenBoxLinks{
    position: relative;
    border: 1px solid #dee8bc;
    border-radius: 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px; 
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 300px;
    height: 300px;
    background: #ffffff; /* Old browsers */
}

/* Change gradient here: http://www.colorzilla.com/gradient-editor/ */
.GreenBoxLinks:hover{
    position: relative;
    border: 1px solid #dee8bc;
    border-radius: 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px; 
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 300px;
    height: 300px;
}



p{
    position: absolute;
    color: black;
}


<!DOCTYPE html>
<html>
<link rel=stylesheet href="boxes.css">
<body>

<ul class="GreenBoxContainer">
    <li class="GreenBox box11">
        <a class="GreenBoxLinks" href="#">
                <p>xcbvvcbbvcvc</p>
        </a>
    </li>

    <li class="GreenBox box22"><a class="GreenBoxLinks" href="#"></a></li>
    <li class="GreenBox box33"><a class="GreenBoxLinks" href="#"></a></li>
</ul>


</body>
</html>

Answer 1

您无法看到p和h元素，因为您将字体大小设置为0：

font-size：0;

这是一行评论的同一个例子：http://jsfiddle.net/avk44/1/

.GreenBoxContainer{
    margin: 0 auto;
    width: 920px;
    padding: 0px;
    background-color: black;
    #font-size: 0;   <-------------------- REMOVE
    display: inline-block;
    height: 300px;
}

请帮我学习获取html元素

1 个答案: