html - 在文本下放置一个 CSS 按钮

Question

我尝试使用 css 在文本下方放置一个按钮，但我尝试了不同的解决方案（
，空白：pre-wrap;..），但没有任何改变，我在文本附近获得按钮（确定）。

这是代码：

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 之外。

<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> 

Answer 2

你试过拿出来<div>吗？

你也在结尾处缺少一个“>”

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