CSS 底部未定位在页面底部

创建一个居中的按钮列表。不幸的是在页面顶部。

<html>
<head>
    <style>
        #test {
            display: table;
            margin: 0 auto;
            bottom: 5em;
        }
        .mybtn .button {
            background-color: orange;
            border: 1px solid green;
            width: 120px;
            color: white;
            font-size: 14px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: block;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="mybtn">
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
    </div>
</div>
</body>
</html>

底部：5EM不起作用的任何原因？

作为 CSS 的初学者，我将不胜感激任何关于为什么我还需要设置 .mybtn 使 CSS 工作的提示！

只需放置position:relative

<html>
<head>
    <style>
        #test {
            position: relative;
            display: table;
            margin: 0 auto;
            bottom: 5em;
        }
        .mybtn .button {
            background-color: orange;
            border: 1px solid green;
            width: 120px;
            color: white;
            font-size: 14px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: block;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="mybtn">
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
        <button class="button">Result</button>
    </div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：