Question

我最近开始使用HTML，我想知道为什么这个按钮正在向上移动。要查看此问题，请访问：http://getthunkin.sanderjochems.nl/github/onboarding.php

<body>
<h1>Welcome To GetThunkin! Lets Get Started!</h1>
<p>Thanks for joining! We are so excited to have you here! Please choose an 
option and lets GetThunkin</p>  
<div class="button1">
<div class="container"> 
<div class="btn">
<span>View Minilessons</span>
<div class="dot"></div>
</div>
</div>
</div>
<div class="button2">
<div class="container"> 
<div class="btn">
<span>View Classes</span>
<div class="dot"></div>
</div>
</div>
</div>
<div class="button3">
<div class="container"> 
<div class="btn">
<span>View Course</span>
<div class="dot"></div>
</div>
</div>
</div>

</body>

要查看完整代码，请访问： https://github.com/GetThunkin/GetThunkin/blob/master/onboarding.php

感谢您的帮助。

Answer 1

您只需在width:100%

中设置p即可

body {
  height: 100vh;
  display: flex;
  align-items: center;
  flex-flow: wrap;
  background: black;
  font-size: 20px;
  font-family: 'Titillium Web', sans-serif;
}

p {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: #81d4fa;
  width: 100%;
}

.btn {
  position: relative;
  margin: 0 auto;
  width: 30%;
  color: white;
  border: .15em solid green;
  border-radius: 5em;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.3em;
  line-height: 2em;
  cursor: pointer;
}

<h1>Welcome To GetThunkin! Lets Get Started!</h1>
<p>Thanks for joining! We are so excited to have you here! Please choose an option and lets GetThunkin</p>
<div class="button1">
  <div class="container">
    <div class="btn">
      <span>View Minilessons</span>
      <div class="dot"></div>
    </div>
  </div>
</div>
<div class="button2">
  <div class="container">
    <div class="btn">
      <span>View Classes</span>
      <div class="dot"></div>
    </div>
  </div>
</div>
<div class="button3">
  <div class="container">
    <div class="btn">
      <span>View Course</span>
      <div class="dot"></div>
    </div>
  </div>
</div>

按钮在异常点

1 个答案: