按鈕在不尋常的現貨

我最近開始HTML和im想知道爲什麼這個按鈕是向上移動。要查看問題，請到這裏：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

感謝您的幫助。

來源

2017-04-23 Luca Galassi

請發表您的相關代碼在你的問題 – dippas

固定@dippas。對於那個很抱歉。 –

，你只需要設置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>

來源

2017-04-23 21:32:46 dippas

謝謝。這有幫助 –

按鈕在不尋常的現貨

回答

相關問題