在文本下面放置一个css按钮

Question

我尝试使用css在文本下面放一个按钮，但我尝试了不同的解决方案（
，白色空间：预包装; ..）但没有任何改变我得到的按钮（OK）附近文字。

这是代码：

CSS：

      /* Styles for game Help popup */
    #popupHelp {
font-family: 'Orbitron', serif;
font-size: 20px;
font-weight: 600;     
text-shadow: 0px 1px 2px #fff;

color: #222;

position: absolute;   
width: 100%;
height: 100%;
top: 0;
left: 0;

background: rgba(0,0,0,.5);

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;          

-webkit-transition: all .5s ease-in;}

    #popupHelp  h1 {
font-weight: 400;}

    #popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);

border-radius: 10px;

position: relative;

-webkit-box-shadow: 0 5px 5px #333;

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;

-webkit-transition: all .5s ease-in;}

     #popup-box small {
font-size: .6em;}

     /* the type of OK button */
     #popup-box a.buttonOk {
 background: white;
border-radius: 5px;
display: inline;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 150px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;}

    #popup-box a.buttonOk:hover {
background: #006438;
color:#fff;
text-decoration:none;}

HTML：

<section id="popupHelp"  class="hide">
       <div id="popup-bg"></div>
       <div id="popup-box">


       Cards are laid out in a grid face down,
       and players take turns flipping pairs of cards over.
       On each turn, the player will first turn one card over, 
       then a second. If the two cards match, 
       the player scores one point,
       the two cards are removed from the game, 
       and the player gets another turn. 
       If they do not match, the cards are turned back over.

       <div> <p><a id="ok" class="buttonOk" href="">OK</a></p      
               </div>


       </div>


   </section> 

任何想法都要提前感谢你

Answer 1

您是否尝试取出<div>？

你也错过了一个“＆gt;”在结束时

<p><a id="ok" class="buttonOk" href="">OK</a></p>

Answer 2

快速浏览最简单的选项似乎只是将按钮移到弹出框div之外。

<section id="popupHelp"  class="hide">
       <div id="popup-bg"></div>
       <div id="popup-box">
       Cards are laid out in a grid face down,
       and players take turns flipping pairs of cards over.
       On each turn, the player will first turn one card over,
       then a second. If the two cards match,
       the player scores one point,
       the two cards are removed from the game,
       and the player gets another turn.
       If they do not match, the cards are turned back over.
       </div>
           <div><p><a id="ok" class="buttonOk" href="">OK</a></p>    
       </div>
</section>