Tôi sử dụng mã này để căn chỉnh một nút.

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

Nhưng <p>các thẻ lãng phí một số không gian, vì vậy tìm cách làm tương tự với <span>hoặc <div>.

Kỹ thuật căn chỉnh nào bạn sử dụng phụ thuộc vào hoàn cảnh của bạn, nhưng kỹ thuật cơ bản là float: right;:

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

Có thể bạn sẽ muốn xóa phao của mình nhưng điều đó có thể được thực hiện với overflow:hiddenthùng chứa cha hoặc một phần rõ ràng <div style="clear: both;"></div>ở dưới cùng của thùng chứa.

Ví dụ: http://jsfiddle.net/ambigupt/8UvVg/

Các phần tử nổi được loại bỏ khỏi luồng tài liệu thông thường để chúng có thể vượt qua ranh giới của cha mẹ và làm rối loạn chiều cao của cha mẹ, clear:bothCSS sẽ xử lý việc đó (như vậy overflow:hidden). Chơi xung quanh với ví dụ về JSFiddle mà tôi đã thêm để xem cách trôi nổi và xóa hoạt động ( overflow:hiddenmặc dù bạn sẽ muốn bỏ cái đầu tiên).

Một khả năng khác là sử dụng định vị tuyệt đối theo hướng bên phải:

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

Dưới đây là một ví dụ: https://jsfiddle.net/a2Ld1xse/

Giải pháp này có nhược điểm, nhưng có những trường hợp sử dụng rất hữu ích.

Nếu nút là duy nhất elementtrên 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>

Nếu có khác elements trên block:

.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>

Với 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>

Chúc may mắn...

Giải pháp này phụ thuộc vào Bootstrap 3, như được chỉ ra bởi @ günther-jena

Hãy thử <a class="btn text-right">Call to Action</a>. Bằng cách này, bạn không cần thêm đánh dấu hoặc quy tắc để xóa các phần tử nổi.

một cách tiếp cận hiện đại vào năm 2019 bằng cách sử dụng hộp flex

với thẻ div

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

với thẻ span

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

Một khả năng khác là sử dụng định vị tuyệt đối hướng về bên phải. Bạn có thể làm theo cách này:

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

Nó không phải lúc nào cũng đơn giản và đôi khi sự liên kết phải được xác định trong vùng chứa và không phải trong chính phần tử Nút!

Đối với trường hợp của bạn, giải pháp sẽ là

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

Tôi đã cẩn thận chỉ định width=100%để chắc chắn rằng <div>lấy toàn bộ chiều rộng của container của anh ấy.

Tôi cũng đã thêm padding:0để tránh trước và sau không gian như với <p>phần tử.

Tôi có thể nói rằng nếu <div>được xác định trong chân trang của bảng FSF / Primefaces, float:rightthì không hoạt động chính xác vì chiều cao Nút sẽ trở nên cao hơn chiều cao chân trang!

Trong tình huống Primefaces này, giải pháp duy nhất được chấp nhận là sử dụng text-align:righttrong container.

Với giải pháp này, nếu bạn có 6 Nút để căn chỉnh ở bên phải, bạn chỉ phải chỉ định căn chỉnh này trong vùng chứa :-)

<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>

Để giữ nút trong luồng trang:

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

(đặt kiểu đó trong tệp .css, không sử dụng nội tuyến html này để bảo trì tốt hơn)

Điều này sẽ giải quyết nó.

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

Chúc may mắn với mã của bạn!

Trong trường hợp của tôi

<p align="right"/>

làm việc tốt

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