定位一個css按鈕

我想讓一個按鈕出現在下一行。但我試圖使用屬性的「位置」和「行高」的按鈕，但沒有什麼改變。我希望它在下一行的中心輸入文本的名稱 the button i want to move it to the next line 定位一個css按鈕

這是我的代碼：

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>

來源

2012-04-23 Amira Manai

您inpu後添加一個分界線（<br>） T字段：

<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-23 19:24:07

你嘗試過嗎？ – j08691 2012-04-23 19:25:25

沒有，但我過去多次使用過這種形式。當然，可能有某種風格會覆蓋這種行爲，但這不太可能。 – 2012-04-23 19:26:11

對不起，遲到的回覆，我現在試試，但它沒有工作 – 2012-04-23 19:57:53

我不知道如果我理解你的問題，但也許您可以將按鈕

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

在CSS中使用它之前

.both{ 
clear: both; 
}

來源

2012-04-23 19:37:14

你只需要 input[type=text] { display:block; } 和 #validatelogin{ display:block; } 在你的CSS。這將解決您的問題

來源

2012-04-23 21:15:50

定位一個css按鈕

回答

相關問題