Я использую этот код для правильного выравнивания кнопки.

<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:bothпозаботится CSS (как и 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 году с использованием flex-box

с тегом div

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

с тегом span

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