HTML如何將按鈕向右移

對不起，如果問題是愚蠢的，因爲我只是一個HTML初學者。如何將我的按鈕移動到右側？我嘗試了一些方法，但似乎並不奏效。這是我的代碼。HTML如何將按鈕向右移

<!DOCTYPE html> 
<html> 
<head> 
<title>Sample Dashboard</title> 
<style type="text/css"> 

p.pos_right { 
    position: relative; 
    left: 20px; 
} 

.button_example{ 
border:1px solid #f9f68a; -webkit-border-radius: 3px; -moz-border-radius:  3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text- shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; 
background-color: #fcfac0; background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfac0), to(#f6f283)); 
background-image: -webkit-linear-gradient(top, #fcfac0, #f6f283); 
background-image: -moz-linear-gradient(top, #fcfac0, #f6f283); 
background-image: -ms-linear-gradient(top, #fcfac0, #f6f283); 
background-image: -o-linear-gradient(top, #fcfac0, #f6f283); 
background-image: linear-gradient(to bottom, #fcfac0, #f6f283);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fcfac0, endColorstr=#f6f283); 
} 

.button_example:hover{ 
border:1px solid #f7f25f; 
background-color: #faf68f; background-image: -webkit-gradient(linear, left top, left bottom, from(#faf68f), to(#f3ed53)); 
background-image: -webkit-linear-gradient(top, #faf68f, #f3ed53); 
background-image: -moz-linear-gradient(top, #faf68f, #f3ed53); 
background-image: -ms-linear-gradient(top, #faf68f, #f3ed53); 
background-image: -o-linear-gradient(top, #faf68f, #f3ed53); 
background-image: linear-gradient(to bottom, #faf68f, #f3ed53);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startC  olorstr=#faf68f, endColorstr=#f3ed53); 
} 
</style> 
</head> 
<body> 

<p class="pos_right">Most Number of Referrals for the month of </p> 
<a class="button_example" href="#"><font color="black">UPDATE</font></a> 


</body> 
</html>

來源

2015-05-13 marse

您是否嘗試過屬性浮動：rigth？ –

這是應該使用教程的地方，不是堆棧溢出。 – Mayhem

許多方法如何做到這一點，例如float

.button_example {float: right}

來源

2015-05-13 06:03:14 panther

問題如果我只是想將它稍微向右移動？ – marse

@marse：'margin' – panther

使用CSS float property的幫助下，你可以相應調整要素。 Demo

.button_example{ 
    float: right; 
}

來源

2015-05-13 06:12:26 stanze

您還可以通過應用text-align: right;到它的父打動你按鈕向右。在你的情況下，它的父母是身體。

所以，你可以應用CSS一樣：

body { 
    text-align: right; 
}

注：使你的p標籤也對齊到右。

來源

2015-05-13 06:12:32 ketan

根據你想要多大的空間，將其移動到右側添加這.button_example：

margin-left:100px;

來源

2015-05-13 06:25:02 Pindakaas

只需添加到

.button_example { 
    position:absolute; 
    top: 10px; 
    right:0; 
}

這裏的片斷

p.pos_right { 
 
    position: relative; 
 
    left: 20px; 
 
} 
 

 
.button_example { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 15px; 
 
     border:1px solid #f9f68a; 
 
     -webkit-border-radius: 3px; 
 
     -moz-border-radius: 3px; 
 
     border-radius: 3px; 
 
     font-size:12px;font-family:arial, helvetica, sans-serif; 
 
     padding: 10px 10px 10px 10px; 
 
     text-decoration:none; 
 
     display:inline-block; 
 
     text-shadow: -1px -1px 0 rgba(0,0,0,0.3); 
 
     font-weight:bold; 
 
     color: #FFFFFF; 
 
     background-color: #fcfac0; 
 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfac0), to(#f6f283)); 
 
     background-image: -webkit-linear-gradient(top, #fcfac0, #f6f283); 
 
     background-image: -moz-linear-gradient(top, #fcfac0, #f6f283); 
 
     background-image: -ms-linear-gradient(top, #fcfac0, #f6f283); 
 
     background-image: -o-linear-gradient(top, #fcfac0, #f6f283); 
 
     background-image: linear-gradient(to bottom, #fcfac0, #f6f283); 
 
     filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fcfac0, endColorstr=#f6f283); 
 
} 
 

 
.button_example:hover{ 
 
    border:1px solid #f7f25f; 
 
    background-color: #faf68f; background-image: -webkit-gradient(linear, left top, left bottom, from(#faf68f), to(#f3ed53)); 
 
    background-image: -webkit-linear-gradient(top, #faf68f, #f3ed53); 
 
    background-image: -moz-linear-gradient(top, #faf68f, #f3ed53); 
 
    background-image: -ms-linear-gradient(top, #faf68f, #f3ed53); 
 
    background-image: -o-linear-gradient(top, #faf68f, #f3ed53); 
 
    background-image: linear-gradient(to bottom, #faf68f, #f3ed53);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startC  olorstr=#faf68f, endColorstr=#f3ed53); 
 
}

<p class="pos_right">Most Number of Referrals for the month of </p> 
 
<a class="button_example" href="#"><font color="black">UPDATE</font></a>

來源

2015-05-13 06:46:44 streletss

HTML如何將按鈕向右移

回答

相關問題