0

次の行にボタンを表示したい。しかし、ボタンの属性「position」と「line-height」を使用しようとしましたが、何も変更されていません。名前の入力テキストの下の次の行の中央に配置したいです。 次の行に移動したいボタン

これは私のコードです：

cssファイル：

#popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;     
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;}

   #popup h1 {
font-weight: 400;
   }

   #popup-box {
width: 400px;
height: 300px;
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; }


   #popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;     
    }
     #popup.hide #popup-box{
margin-top: -800px;}


  #popup-box a.button {
background: white;
border-radius: 10px;
display: block;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 50px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;
cursor:pointer;}

htmlファイル：

<section id="popup">
    <div id="popup-bg">
    </div>
 <div id="popup-box">   
 <p><a id="gamelogin1" class="button"   href="">choose Name</a></p>
 <p><a id="gamelogin2" class="button"   href="">New Name</a></p>
 </div>
</section>

<section id="popupName" class="hide">
   <div id="popup-bg">
    </div>
 <div id="popup-box">   
 <label for="firstName">Your Name :</label>
<input type="text" name="firstName" size="20" maxlength="40"  id="firstName" />

 **<p><a id="validatelogin" class="button"  href="">Validate</a></p> //this is the //button i want to change**
</div>
</section>
4

3 に答える 3

2

<br>入力フィールドの後にブレークライン（）を追加します。

<input type="text" name="firstName" size="20" maxlength="40"  id="firstName" /><br>

<br>タグは自動的に閉じる必要があると主張する人もい<br />ますが、これは必須ではありません。

中央に配置するには、次のCSSを使用します。

#validatelogin {
    width:100px;
    margin: 0 auto;
}

幅をボタンの適切な幅に設定します。動作させるには修正する必要がありますmargin: 0 auto;。

于 2012-04-23T19:24:07.620 に答える
1

あなたの質問を理解しているかどうかはわかりませんが、ボタンの前に使用できるかもしれません

<div class="both"></div>

CSSで

.both{
clear: both;
}
于 2012-04-23T19:37:14.587 に答える
1

CSS にinput[type=text] { display:block; } and が必要なだけです 。#validatelogin{ display:block; }それはあなたの問題を解決します

于 2012-04-23T21:15:50.263 に答える