Bu kodu bir düğmeyi sağa hizalamak için kullanıyorum.

<p align="right">
  <input type="button" value="Click Me" />
</p>

Ancak <p>etiketler biraz yer kaplar, bu yüzden <span>veya ile aynı şeyi yapmak ister <div>.

Hangi hizalama tekniğini kullandığınız, koşullarınıza bağlıdır, ancak temel olan float: right;:

<input type="button" value="Click Me" style="float: right;">

Muhtemelen şamandıralarınızı temizlemek isteyeceksiniz, ancak bu overflow:hidden, ana kapta veya kabın <div style="clear: both;"></div>alt kısmında açık bir şekilde yapılabilir .

Örneğin: http://jsfiddle.net/ambiguous/8UvVg/

Kayan öğeler normal belge akışından kaldırılır, böylece üst öğelerinin sınırlarını aşabilir ve üst öğenin yüksekliğini bozabilirler, clear:bothCSS bununla ilgilenir (olduğu gibi overflow:hidden). Kayan ve temizliğin nasıl davrandığını görmek için eklediğim JSFiddle örneğiyle oynayın ( overflow:hiddenilkini bırakmak istersiniz ).

Başka bir olasılık, sağa yönelik mutlak bir konumlandırma kullanmaktır:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

İşte bir örnek: https://jsfiddle.net/a2Ld1xse/

Bu çözümün dezavantajları vardır, ancak çok yararlı olduğu kullanım durumları vardır.

Düğme yalnızca elementşurada bulunuyorsa block:

.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}

<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>

Üzerinde başka varsa :elementsblock

.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}

<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>

İle flex-box:

.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}

<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

İyi şanslar...

Bu çözüm, @ günther-jena tarafından belirtildiği gibi Bootstrap 3'e bağlıdır.

Deneyin <a class="btn text-right">Call to Action</a>. Bu şekilde, kayan öğeleri temizlemek için fazladan işaretlemeye veya kurallara ihtiyacınız yoktur.

2019 yılında flex-box kullanarak modern bir yaklaşım

ile div etiketi

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

ile açıklık etiketi

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

Başka bir olasılık, sağa yönelik mutlak bir konumlandırma kullanmaktır. Bunu şu şekilde yapabilirsiniz:

style="position: absolute; right: 0;"

Her zaman bu kadar basit değildir ve bazen hizalama, Button öğesinin kendisinde değil, kapta tanımlanmalıdır!

Sizin durumunuz için çözüm

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

width=100%Emin olmak için belirledim<div>Konteynerinin tam genişliğini alacağından .

Ayrıca padding:0boşluktan önce ve sonra kaçınmak için ekledim<p> .

Ben eğer söyleyebiliriz <div>bir FSF tanımlanır / Primefaces tablonun altbilgi, float:rightDüğme yüksekliği altbilgi yüksekliği daha yüksek olacak çünkü düzgün çalışmıyor!

Bu Primefaces durumunda kabul edilebilir tek çözüm text-align:rightkapta kullanmaktır .

Bu çözümle, sağda hizalamak için 6 Düğmeniz varsa, bu hizalamayı yalnızca kapta belirtmeniz gerekir :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

Düğmeyi sayfa akışında tutmak için:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(bu stili bir .css dosyasına koyun, daha iyi bakım için bu html satır satırını kullanmayın)

Bu çözerdi.

<input type="button" value="Text Here..." style="float: right;">

Kodunuzda iyi şanslar!

Benim durumumda

<p align="right"/>

iyi çalıştı

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>