Ответ 1

Какой метод выравнивания вы используете, зависит от ваших обстоятельств, но основным является 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 позаботятся clear:both CSS (как и overflow:hidden). Поэкспериментируйте с примером JSFiddle, который я добавил, чтобы увидеть, как ведут себя плавающие и очищающие (вы захотите сбросить overflow:hidden сначала overflow:hidden).

Ответ 2

Другая возможность - использовать абсолютное позиционирование, ориентированное вправо:

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

Вот пример: https://jsfiddle.net/a2Ld1xse/

Это решение имеет свои недостатки, но есть случаи, когда это очень полезно.

Ответ 3

Это решение зависит от Bootstrap 3, как указано @günther-jena

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

Ответ 4

Если кнопка является единственной 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>

Ответ 5

Это не всегда так просто, и иногда выравнивание должно быть определено в контейнере, а не в самом элементе 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 не будет работать правильно, потому что высота Button станет выше, чем высота нижнего колонтитула!

В этой ситуации 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>

Ответ 6

современный подход в 2019 году с использованием flex-box

с тегом div

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

Ответ 7

Другая возможность - использовать абсолютное позиционирование, ориентированное вправо. Вы можете сделать это следующим образом:

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

Ответ 8

Чтобы сохранить кнопку в потоке страницы:

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

(поместите этот стиль в файл .css, не используйте этот встроенный html, для лучшего обслуживания)

Ответ 9

Это решило бы это.

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

Удачи с вашим кодом!

Ответ 10

В моем случае

<p align="right"/>

работал нормально