Question

由于某种原因，标题中的按钮会更改大小，但主菜单中的两个按钮不会更改。为什么会发生这种情况，我该如何解决？当我在开发人员工具中检查我的网站时，它表明宽度和高度已应用于按钮，但没有视觉变化。

在此处查看代码： https://codepen.io/Burning_Pancakes/pen/JjdNwWg

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dribbble Double</title>
        <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>

    <body>

        <header>
            <img id="logo" src="images/ball.svg" alt="ball"/>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Explore</a></li>
                    <li><a href="#">Hire</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <a class="signup link" href="#">Sign Up</a>
        </header>

        <main>
            <h1>Dribble Double</h1>
            <p>Find &amp; showcase creative work from the worlds best design professionals</p>
            <a class="signup link" href="#">Sign Up</a>
            <a class="link" id="learn" href="#">Learn More</a>
        </main>
    </body>
</html>

CSS：

/* CSS Document */
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
header {
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 12em;
}
#logo {
    height: 50%;
}
nav {
    margin-left: 3em;
    width: 50%;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;

}
li {
        width: 25%;
}
a {
    text-decoration: none;
    color: #000;
}
.link {
    height: 48px;
    width: 140px;
}
.signup {
    color: #fff;
    background: #01D70B;
}
main {
    height: calc(100% - 100px);
    width: 100%;
}

Answer 1

具有链接类的锚点应具有display：inline-block;属性，以便受尺寸属性（宽度/高度）的影响。

更改您的.link样式

.link {
  height: 48px;
  width: 140px;
  display:inline-block;
}

我无法更改元素的高度和宽度

1 个答案: