Я использую этот код для правильного выравнивания кнопки.
<p align="right">
<input type="button" value="Click Me" />
</p>
Но <p>
теги тратят некоторое пространство, поэтому вы можете сделать то же самое с <span>
или <div>
.
Я использую этот код для правильного выравнивания кнопки.
<p align="right">
<input type="button" value="Click Me" />
</p>
Но <p>
теги тратят некоторое пространство, поэтому вы можете сделать то же самое с <span>
или <div>
.
align
Атрибут является устаревшим в HTML 4.01 и не поддерживается в HTML5, использовать CSStext-align
вместо того, чтобы достичь того же эффекта.Ответы:
Какой метод выравнивания вы используете, зависит от ваших обстоятельств, но основным является
float: right;
:Вы, вероятно, захотите очистить ваши плавающие объекты, но это можно сделать с
overflow:hidden
помощью родительского контейнера или явным образом<div style="clear: both;"></div>
в нижней части контейнера.Например: http://jsfiddle.net/ambiguous/8UvVg/
Плавающие элементы удаляются из обычного потока документов, поэтому они могут переполнить границу своего родителя и испортить высоту родителя, об этом
clear:both
позаботится CSS (как иoverflow:hidden
). Поэкспериментируйте с примером JSFiddle, который я добавил, чтобы увидеть, как ведут себя плавающие и очищающие (overflow:hidden
хотя вы захотите отбросить первое).источник
Другая возможность заключается в использовании абсолютного позиционирования, ориентированного вправо:
Вот пример: https://jsfiddle.net/a2Ld1xse/
У этого решения есть свои недостатки, но есть случаи, когда оно очень полезно.
источник
Если кнопка является единственной
element
наblock
:Если есть другие
elements
наblock
:С
flex-box
:Удачи...
источник
margin-left:auto
здорово!!important
Худшее, это будет вызывать проблемы в будущем.display: flex;
. Он заботится обо всем.Это решение зависит от Bootstrap 3, на что указывает @ günther-jena
Попробуй
<a class="btn text-right">Call to Action</a>
. Таким образом, вам не нужна дополнительная разметка или правила для удаления плавающих элементов.источник
современный подход в 2019 году с использованием flex-box
с тегом div
с тегом span
источник
Другая возможность - использовать абсолютное позиционирование, ориентированное вправо. Вы можете сделать это следующим образом:
источник
div
, это решительно игнорирует его ограничения.Это не всегда так просто, и иногда выравнивание должно быть определено в контейнере, а не в самом элементе Button!
Для вашего случая решение будет
Я позаботился о том, чтобы уточнить,
width=100%
чтобы быть уверенным, что<div>
взять всю ширину его контейнера.Я также добавил,
padding:0
чтобы избежать до и после пробела, как с<p>
элементом.Я могу сказать, что если
<div>
он определен в нижнем колонтитуле таблицы FSF / Primefaces,float:right
они не будут работать правильно, потому что высота кнопки станет выше, чем высота нижнего колонтитула!В этой ситуации с Primefaces единственным приемлемым решением является использование
text-align:right
в контейнере.При таком решении, если у вас есть 6 кнопок для выравнивания справа, вы должны указать это выравнивание только в контейнере :-)
источник
Чтобы сохранить кнопку в потоке страницы:
(поместите этот стиль в файл .css, не используйте этот встроенный HTML, для лучшего обслуживания)
источник
Это решило бы это.
Удачи с вашим кодом!
источник
В моем случае
работал нормально
источник
источник