0

css を使用してテキストの下にボタンを配置しようとしましたが、別の解決策 (
、空白: pre-wrap;..) を試しましたが、テキストの近くにボタン (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>

どんなアイデアでも事前に感謝します

4

2 に答える 2

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>
于 2012-05-01T00:08:09.070 に答える
0

を取り出してみました<div>か？

また、末尾に「>」がありません 

<p><a id="ok" class="buttonOk" href="">OK</a></p>
于 2012-04-30T23:07:56.447 に答える