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

Вы попробовали свойство float: 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; 
}

Примечание: Это сделать ваш р тег также выравнивать вправо.

источник

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, как переместить кнопку вправо

ответ

Смежные вопросы