时间戳

首页 > 解决方案 > div 中的锚标记感觉不像是 div 的一部分

html - div 中的锚标记感觉不像是 div 的一部分

问题描述

我正在为学校做一个项目，我正在制作一个部分，50% 是一些文本和一个锚标签，50% 是一个图像。所以这个部分有点奇怪，当我在上面做margin-top时，锚标签没有下降，就像粘在h1上一样，再加上我的h1没有听任何margin-top而是移动我不想要的整个 div。有什么帮助吗？

我的代码HTML：

<body>
    <header>
        <nav>
            <span class="branding">SportBuddy</span>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Find People</a></li>
                <li><a href="#">My Friends</a></li>
                <li class="dropdown"><a href="#">Account</a></li>
                <!-- <li class="account"><a href="#"><img src="img/account.png"></a></li> -->
            </ul>
        </nav>
    </header>

    <div class="make-account">
        <h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>

        <a href="#">MAKE AN ACCOUNT</a>
    </div>
    
</body>

CSS

/* We help you find your own sportbuddy! */
.make-account {
    width: 50%;
    margin-top: 0.5%;
    padding-bottom: 15%;
    background-color: #EBCEBF;
    display: inline-block;
}

.make-account h1 {
    text-align: center;
    margin: 0%;
    color: #FDF8F5;
}

.make-account a {
    color: #FDF8F5;
    background-color: #266150;
    padding: 1% 3% 1% 3%;
}

标签： htmlcss

解决方案

我清理了你的CSS。现在您可以在不更改 div 大小的情况下提供 margin 属性

.make-account {
    height: 100%;
    width: 50%;
    margin-top: 0.5%;
    background-color: #EBCEBF;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.make-account h1 {
    text-align: center;
    color: #FDF8F5;
}

.make-account a {
    color: #FDF8F5;
    background-color: #266150;
    padding: 1% 3% 1% 3%;
    margin-bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<header>
        <nav>
            <span class="branding">SportBuddy</span>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Find People</a></li>
                <li><a href="#">My Friends</a></li>
                <li class="dropdown"><a href="#">Account</a></li>
                <!-- <li class="account"><a href="#"><img src="img/account.png"></a></li> -->
            </ul>
        </nav>
    </header>

    <div class="make-account">
        <h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>

        <a href="#">MAKE AN ACCOUNT</a>
    </div>

</body>
</html>

推荐阅读