我尝试使用 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>
任何想法请提前谢谢你