Ik gebruik deze code naar rechts, een knop uitlijnen.
<p align="right">
<input type="button" value="Click Me" />
</p>Antwoord 1, Autoriteit 100%
Welke uitlijningstechniek die u gebruikt, hangt af van uw omstandigheden, maar de basis is float: right;:
<input type="button" value="Click Me" style="float: right;">
Je wilt waarschijnlijk je drijvers wissen, maar dat kan worden gedaan met overflow:hiddenop de oudercontainer of een expliciete <div style="clear: both;"></div>onderaan de container.
Bijvoorbeeld: http://jsfiddle.net/Abedduous/8uvvg/
Gevochtige elementen worden uit de normale documentstroom verwijderd, zodat ze de grens van hun ouders kunnen overlopen en de hoogte van de ouder worden verpest, de clear:bothCSS zorgt voor dat (zoals overflow:hidden). Speel rond met het voorbeeld van JSFiddle Ik voegde eraan toe om te zien hoe drijvend en clearing zich gedraagt (je wilt de overflow:hiddenTen eerste).
Antwoord 2, Autoriteit 9%
Een andere mogelijkheid is om een absolute positioneringsgericht te gebruiken aan de rechterkant:
<input type="button" value="Click Me" style="position: absolute; right: 0;">
Hier is een voorbeeld: https://jsfiddle.net/a2ld1xse/
Deze oplossing heeft zijn nadelen, maar er zijn gebruiksgevallen waarin het erg handig is.
Antwoord 3, Autoriteit 8%
Als de knop de enige elementop de 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>Antwoord 4, Autoriteit 2%
Deze oplossing is afhankelijk van bootstrap 3, zoals aangegeven door @ Günther-Jena
Probeer <a class="btn text-right">Call to Action</a>. Op deze manier hebt u geen extra markup of regels nodig om drijvende elementen op te ruimen.
Antwoord 5, Autoriteit 2%
Een moderne aanpak in 2019 met flex-box
Met div tag
<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
<input type="button" value="Click Me"/>
</div>Antwoord 6
Om de knop in de pagina van de pagina te behouden:
<input type="button" value="Click Me" style="margin-left: auto; display: block;" />
(zet die stijl in een .css-bestand, gebruik deze html niet inline, voor beter onderhoud)
Antwoord 7
Het is niet altijd zo eenvoudig en soms moet de uitlijning in de container worden gedefinieerd en niet in het Button-element zelf!
Voor jouw geval zou de oplossing zijn
<div style="text-align:right; width:100%; padding:0;">
<input type="button" value="Click Me"/>
</div>
Ik heb ervoor gezorgd om width=100%op te geven om er zeker van te zijn dat <div>de volledige breedte van zijn container inneemt.
Ik heb ook padding:0toegevoegd om voor en na spatie te vermijden, zoals bij het <p>element.
Ik kan zeggen dat als <div>is gedefinieerd in de voettekst van een FSF/Primefaces-tabel, de float:rightniet correct werkt omdat de hoogte van de knop hoger worden dan de voettekst!
In deze Primefaces-situatie is de enige acceptabele oplossing om text-align:rightin container te gebruiken.
Met deze oplossing, als je 6 knoppen hebt om rechts uit te lijnen, moet je deze uitlijning alleen specificeren in container 🙂
<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>
Antwoord 8
Een andere mogelijkheid is om een naar rechts georiënteerde absolute positionering te gebruiken. Je kunt het op deze manier doen:
style="position: absolute; right: 0;"
Antwoord 9
<div style = "display: flex; justify-content:flex-end">
<button>Click me!</button>
</div>Antwoord 10
Dit zou het oplossen.
<input type="button" value="Text Here..." style="float: right;">
Veel succes met je code!
Antwoord 11
In mijn geval de
<p align="right"/>
werkte prima