时间戳

首页 > 解决方案 > 无法定位我的边界

html - 无法定位我的边界

问题描述

body {
    background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
    font-size:50px;
    font-family: 'Raleway', sans-serif;
    position: absolute;
    color: white;
    left: 790px;
}
.title {
    position: relative;
}
.text {
    color: white;
    font-family: 'Work Sans', sans-serif;
    font-size: 30px;
    line-height: 10px;
}
.nfa {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    margin-left:100px;
    margin-top: 65px;
    background-color:black|50%;
}
.sfa {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    margin-left:100px;
    margin-top: 65px;
    background-color:black;
}
.of {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    margin-left:750px;
    margin-bottom: 500px;
    background-color:black;
    position: absolute;
}
.text-desc {
    color:white;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
}
.buttonnfa {
    background-color: #09ebf7;
    border: none;
    color: white;
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top:15px;
    font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
    background-color: #09ebf7;
    border: none;
    color: white;
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top:15px;
    font-family: 'Work Sans', sans-serif;
}
.buttonof {
    background-color: #09ebf7;
    border: none;
    color: white;
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top:15px;
    font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
    background-color:#05a2aa;
}
.buttonsfa:hover{
    background-color:#05a2aa;
}
.buttonof:hover{
    background-color:#05a2aa;
}
<!doctype html>
<html>
    <head>
        <title> SpeedyAlts </title>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
    </head>
    <body>
        <div class='bg'>
            <a class="title"> SpeedyAlts </a>
            <div class="nfa">
                <center>
                    <a class="text"> NFA Account </a>
                    <br>
                    <br>
                    <a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
                </center>
                <a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
            </div>

            <div class="sfa">
                <center>
                    <a class="text"> SFA Account </a>
                    <br>
                    <br>
                    <a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
                </center>
                <a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
            </div>

            <div class="of">
                <center>
                    <a class="text"> Optifine Cape </a>
                    <br>
                    <br>
                    <a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
                </center>
                <a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
            </div>

        </div>
        <script src="https://embed.selly.gg"></script>
    </body>
</html>

我不知道为什么它不起作用。由于某种原因，margin-top margin-left 等。它不会随着任何边距上下移动。有人可以帮忙吗？我不擅长 HTML 也不擅长 CSS，所以请原谅任何格式错误的代码（如果有的话）。另外，如果将来有人可以就此类问题给我任何建议，那将很有帮助。谢谢。

标签： htmlcss

解决方案

你div的问题有position:absolute。您将需要删除它，或使用topand bottom,left并将right其移动到页面上。在您的示例中，如果您想在页面上向上移动元素，您需要声明：

.of {
    width: 250px;
    border: 1px solid white;
    padding: 75px;
    margin: 10px;
    background-color:black;
    position: absolute;
    left:750px;
    bottom: 500px;
}

请记住，这意味着您的元素将始终距底部 500 像素和距左侧 750 像素。最好使用百分比值。

推荐阅读