Używam tego kodu, aby wyrównać przycisk do prawej.
<p align="right">
<input type="button" value="Click Me" />
</p>
Ale <p>
tagi marnują trochę miejsca, więc chcę zrobić to samo z <span>
lub <div>
.
Używam tego kodu, aby wyrównać przycisk do prawej.
<p align="right">
<input type="button" value="Click Me" />
</p>
Ale <p>
tagi marnują trochę miejsca, więc chcę zrobić to samo z <span>
lub <div>
.
align
Atrybut jest przestarzałe w HTML 4.01 i nieobsługiwane w HTML5, użyć CSStext-align
zamiast osiągnąć ten sam efekt.Odpowiedzi:
Wybór techniki dopasowania zależy od okoliczności, ale podstawowa to
float: right;
:Prawdopodobnie będziesz chciał wyczyścić zmiennoprzecinkowe, ale można to zrobić za
overflow:hidden
pomocą kontenera nadrzędnego lub jawnego<div style="clear: both;"></div>
na dole kontenera.Na przykład: http://jsfiddle.net/ambiguous/8UvVg/
Elementy pływające są usuwane z normalnego przepływu dokumentów, aby mogły przepełnić granicę rodzica i zepsuć wysokość rodzica,
clear:both
CSS dba o to (jak to robioverflow:hidden
). Zapoznaj się z przykładem JSFiddle, który dodałem, aby zobaczyć, jak zachowują się ruchy pływające i kasowanie (overflow:hidden
pierwszy z nich chcesz jednak usunąć ).źródło
Inną możliwością jest zastosowanie bezwzględnego pozycjonowania zorientowanego w prawo:
Oto przykład: https://jsfiddle.net/a2Ld1xse/
To rozwiązanie ma swoje wady, ale są przypadki użycia, w których jest bardzo przydatne.
źródło
Jeśli przycisk jest jedynym
element
nablock
:Jeśli są inne
elements
nablock
:Z
flex-box
:Powodzenia...
źródło
margin-left:auto
jest świetne! To!important
najgorsze, spowoduje problemy w przyszłości.display: flex;
. Dba o wszystko.To rozwiązanie zależy od Bootstrap 3, jak wskazał @ günther-jena
Spróbować
<a class="btn text-right">Call to Action</a>
. W ten sposób nie potrzebujesz dodatkowych znaczników ani reguł, aby usunąć elementy pływające.źródło
nowoczesne podejście w 2019 roku za pomocą Flex-Box
z tagiem div
z przęsła znacznika
źródło
Inną możliwością jest użycie bezwzględnego pozycjonowania zorientowanego z prawej strony. Możesz to zrobić w ten sposób:
źródło
div
, to zdecydowanie zignoruje jego ograniczenia.Nie zawsze jest to takie proste i czasami wyrównanie musi być zdefiniowane w kontenerze, a nie w samym elemencie Button!
W twoim przypadku rozwiązaniem byłoby
Zadbałem
width=100%
o to, aby upewnić się, że<div>
zajmiesz pełną szerokość jego pojemnika.Dodałem również,
padding:0
aby uniknąć przed i po spacji, jak w przypadku<p>
elementu.Mogę powiedzieć, że jeśli
<div>
jest zdefiniowane w stopce tabeli FSF / Primefaces,float:right
nie działają one poprawnie, ponieważ wysokość przycisku będzie wyższa niż wysokość stopki!W tej sytuacji Primefaces jedynym dopuszczalnym rozwiązaniem jest użycie
text-align:right
w kontenerze.Dzięki temu rozwiązaniu, jeśli masz 6 przycisków do wyrównania po prawej stronie, musisz tylko określić to wyrównanie w kontenerze :-)
źródło
Aby utrzymać przycisk w przepływie strony:
(umieść ten styl w pliku .css, nie używaj tego kodu HTML w celu lepszej konserwacji)
źródło
To by to rozwiązało.
Powodzenia w kodzie!
źródło
W moim przypadku
działało dobrze
źródło
źródło