时间戳

首页 > 解决方案 > DOM 的子元素关于父样式的问题

html - DOM 的子元素关于父样式的问题

问题描述

我遇到的问题是关于在 HTML 中使用 div 进行分段。我有一个父 div 为其设置了边框，其中放置了子 div（我正在为棒球创建一个记分牌作为嵌套和布局的测试）。然而，尽管父 div 包含边框，但 div 元素的子元素以及 div 本身都超出了边框。有任何想法吗？这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial scale=1.0">
        <link rel="stylesheet" href="BaseballScoreboard.css">
    </head>
    <body style="background-color:green;">

        <div class="scoreboard">

            <div>
                <p id="atbat" class="text1">AT BAT</p>
                <p id="atbatnum" class="num">12</p>
                <p id="ball" class="text1">BALL</p>
                <p id="ballnum" class="num">3</p>
                <p id="strike" class="text1">STRIKE</p>
                <p id="strikenum" class="num">2</p>
                <p id="out" class="text1">OUT</p>
                <p id="outnum" class="num">0</p>
            </div>

            <div>
                <p id="inning" class="text2">INNING</p>
                <p id="runs" class="text2">RUNS</p>
                <p id="hits" class="text2">HITS</p>
                <p id="errs" class="text2">ERRS</p>
            </div>

            <div>
                <p id="visitor" class="text1">VISITOR</p>
                <p id="home" class="text1">HOME</p>
            </div>

        </div>

    </body>
</html>

...这是CSS：

.scoreboard{
    border: 5px solid;
    border-color: white;
    color: white;
    height: 50%;
    width: 100%;
}

.text1{
    font-size: 50px;
    float: left;
    margin-left: 25px;
}

.text2{
    font-size: 50px;
    float: right;
    margin-left: 25px;
}

.num{
    font-size: 50px;
    float: left;
    margin-left: 15px;
    background-color: black;
    padding: 5px;

}

我很感激帮助。

标签： htmlcss

解决方案

推荐阅读