Я використовую цей код, щоб правильно вирівняти кнопку.

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

Але <p>теги витрачають деякий простір, тому шукаю, щоб зробити те ж саме з <span>або <div>.

Яку техніку вирівнювання ви використовуєте, залежить від ваших обставин, але основна - це float: right;:

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

Ви, ймовірно, захочете очистити свої поплавці, але це можна зробити з overflow:hiddenбатьківського контейнера або явного <div style="clear: both;"></div>внизу контейнера.

Наприклад: http://jsfiddle.net/ambiguous/8UvVg/

Плаваючі елементи видаляються із звичайного документообігу, щоб вони могли переповнювати батьківську межу і зіпсувати висоту батьків, clear:bothCSS опікується цим (як це робиться overflow:hidden). Пограйте з прикладом JSFiddle, який я додав, щоб побачити, як поводяться плаваючі та очисні (хочете, щоб ви відмовились від overflow:hiddenпершого).

Інша можливість полягає у використанні абсолютного позиціонування, орієнтованого праворуч:

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

Ось приклад: https://jsfiddle.net/a2Ld1xse/

У цього рішення є свої недоліки, але є випадки використання, коли це дуже корисно.

Якщо кнопка є єдиною elementна 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>

Якщо є інші elements на 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>

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

Щасти...

Це рішення залежить від Bootstrap 3, на що вказував @ günther-jena

Спробуйте <a class="btn text-right">Call to Action</a>. Таким чином вам не потрібна додаткова розмітка або правила для очищення плаваючих елементів.

сучасний підхід у 2019 році з використанням флекс-боксу

з тегом div

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

з проміжною міткою

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

Інша можливість - використання абсолютного позиціонування, орієнтованого праворуч. Ви можете це зробити так:

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

Це не завжди так просто, і іноді вирівнювання потрібно визначати в контейнері, а не в самому елементі Button!

Для вашого випадку рішення було б

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

Я подбав вказати, width=100%щоб бути впевненим, що <div>візьміть повну ширину його контейнера.

Я також додав, padding:0щоб уникати до і після місця, як з<p> елементом.

Я можу сказати, що якщо <div>це визначено в нижньому колонтитулі таблиці FSF / Primefaces, воно float:rightне працює правильно, оскільки висота кнопки стане вище висоти нижнього колонтитулу!

У цій ситуації з Primefaces єдиним прийнятним рішенням є використання text-align:rightв контейнері.

За допомогою цього рішення, якщо у вас 6 кнопок для вирівнювання праворуч, потрібно вказати це вирівнювання лише в контейнері :-)

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

Щоб зберегти кнопку в потоці сторінки:

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

(покладіть цей стиль у файл .css, не використовуйте цей html вбудований для кращого обслуговування)

Це вирішило б це.

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

Удачі з вашим кодом!

У моєму випадку

<p align="right"/>

добре працював

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